0

我在加载时有 4 个 DIV，我想要隐藏 3 个 .. 单击（选项卡链接）我想显示该选项卡的内容.. 并隐藏其余部分.. 这就是我所拥有的.. 它不起作用 =(

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>
4

3 回答 3

1

如果您包含 jQuery，您的代码可以正常工作。

在右上角，有一个图标可让您选择要包含的框架

于 2013-04-23T17:55:24.420 回答
1

在 CodePen 中，JS 片段在 HTML 中的 jQuery 调用之前被加载。您可以通过单击 JS 窗格顶部的齿轮图标并将 jQuery 添加到库列表来在 CodePen 上修复此问题。当您实际组合一个 HTML 页面以在本地运行时，请先导入 jQuery，然后再导入您正在编写的脚本。

如果您以后在执行此脚本时遇到问题，请检查 JavaScript 控制台。这个错误通常意味着 jQuery 没有被导入：

Uncaught TypeError: Property '$' of object [object Object] is not a function
于 2013-04-23T17:55:51.350 回答
0

如我所见，您包含的 jQuery 实例不起作用。尝试从这里替换它

于 2013-04-23T17:59:57.793 回答