2013-04-23 95 views
0

我有4个DIVs在加载我想隐藏3 ..点击(标签链接)我想显示该标签的内容.. 并隐藏其余..这是什么我有..其没有工作=(Jquery DIV .hide()不工作

http://codepen.io/anon/pen/AafIH

<script type='text/javascript' src='http://mimerchant.com/wp-includes/js/jquery/jquery.js'></script> 
<div class="tabnav"> 
    <ul class="fancyNav"> 
     <li id="news"><a href="#creditcard" id="creditcard_link">Credit Card Processing</a> 
     </li> 
     <li id="about"><a href="#atm" id="atm_link">ATM Processing</a> 
     </li> 
     <li id="services"><a href="#giftcard" id="giftcard_link">Gift Card Program</a> 
     </li> 
     <li id="contact"><a href="#check" id="check_link">Check Guarantee</a> 
     </li> 
    </ul> 
</div> 
<div class="tabcontent"> 
    <div id="creditcard"> 
     <div id="textbox"> 
      <h3>Credit Card Processing</h3> 

      <p>Some Text here about what this credit card tab is about</p> 
      <h3>Low Rates</h3> 

      <p>About Low Rates</h3> 
     </div> 
    </div> 
    <div id="atm"> 
     <div id="textbox"> 
      <h3>ATM Processing</h3> 

      <p>Some text here about the ATM services</p> 
      <h3>Another Title</h3> 

      <p>Some text</p> 
     </div> 
    </div> 
    <div id="giftcard"> 
     <div id="textbox"> 
      <h3>Gift Card Program</h3> 

      <p>Something about gift cards</p> 
     </div> 
    </div> 
    <div id="check"> 
     <div id="textbox"> 
      <h3>Check Guarantee</h3> 

      <p>Something About Checks</p> 
     </div> 
    </div> 
</div> 
+0

ID必须是唯一的。你的JavaScript在哪里? – 2013-04-23 17:51:23

+0

我看到'$不是一个函数',这让我觉得这个JavaScript在jQuery加载之前运行,但我不熟悉codepen – 2013-04-23 17:53:41

+0

你的代码没有问题。 Codepen.io根本不包括你期望的jQuery。如果您在JS配置屏幕中选择了jquery,它将以您想要的方式工作。 – 2013-04-23 17:55:13

回答

1

您的代码工作正常,如果包括jQuery的。

在右上角,还有它可以让你选择一个框架图标包括

1

在CodePen中,JS代码片段在jQuery调用HTML之前就已经加载了。您可以通过单击JS窗格顶部的齿轮图标并将jQuery添加到库列表来修复CodePen。当您实际将一个HTML页面放在一起以在本地运行时,在导入您正在编写的脚本之前导入jQuery。

如果您在将来实施此脚本时遇到问题,请检查JavaScript控制台。这个错误通常意味着没有导入jQuery:

Uncaught TypeError: Property '$' of object [object Object] is not a function 
+0

谢谢..这回答了我的问题..在我的网站上,其他一些插件采取变量为$,所以我只是取代它与jQuery和似乎工作正常。 – user1986245 2013-04-23 20:10:49

0

正如我所看到的,您包含的jQuery实例不起作用。 尝试将其替换为here

+0

只需在空白页面的开发工具上运行jQuery副本,它不会设置$或jQuery变量。 – seniorpreacher 2013-04-23 18:02:20