0

我正在尝试使用选项卡导航并根据单击的选项卡，我需要根据该选项卡显示内容并隐藏属于其他选项卡的内容。我已经包含了选项卡部分、选项卡内容所在的内部 html 以及执行此操作的 javascript。不工作，有什么想法我想念的吗？页面的选项卡部分

<ul class="wui-tab-nav">
    <li class="wui-first"><a class="wui-link" href="index.html">Home </a></li>
    <li class="wui-sub" id="vol"><a class="wui-link" href="#Vol" rel="tabs1">Business Volume </a></li>
    <li class="wui-sub"><a class="wui-link" href="#Vol2"  rel="tabs2">Infras Volume</a></li>
    <li class="wui-sub"><a class="wui-link" href="#Vol3"  rel="tabs3" >Database Volume</a></li>
    <li class="wui-sub"><a class="wui-link" href="#Vol4"  rel="tabs4">Customer Volume</a></li>
</ul>

放置选项卡内容的 div 部分

<DIV id=chart class=wui-inpage-container style="float:left; display: block; overflow: hidden; padding:0; margin:0 auto; border:0;">
    <ul class="tab-content" id="tabs1"> 
            <li id="business_vol1"></li>
            <li id="business_vol2"></li>
            <li id="business_vol3"></li>
            <li id="business_vol4"></li>    
    </ul>

    <ul class="tab-content" id="tabs2"> 
            <li id="Infras1"></li>
            <li id="Infras2"></li>
            <li id="Infras3"></li>                    
    </ul>
</DIV>

javascripts 只显示点击标签内容

<script type="text/javascript">
    $(document).ready(function () {

        $('.wui-link a').click(function () {
            switch_tabs($(this));
        });

        switch_tabs($('#vol'));

    });
</script>

<script type="text/javascript">
    function switch_tabs(obj) {
        $('.tab-content').hide();
        $('.tab-content a').removeClass("selected");
        var id = obj.attr("rel");

        $('#' + id).show();
        obj.addClass("selected");
    } 
</script>
4

3 回答 3

1

您可以创建函数来隐藏所有内容的 div (jquery .hide() )，然后单击 li 您将调用 jquery .show() 函数以显示带有ceratin ID的div。然后在单击另一个 li 时，您需要再次隐藏所有内容并仅显示一个 div。希望我帮助了你

于 2013-02-27T21:18:10.197 回答
1

您正在 #vol 上运行第一次迭代，它不是. <A>，而是包含div. 这个 div，#vol 没有 rel="" 来完成功能。

否则，它看起来没问题。可能会加入一些 alert() 以确保您在某些断点处获得正确的数据。

改变：

switch_tabs($('#vol'));

到：

switch_tabs($('.wui-link:first'));

并测试

于 2013-02-27T21:22:15.540 回答
1

改变

$('.wui-link a').click()

到

$('a.wui-link').click()
于 2013-02-27T21:33:38.103 回答