Question

我正在尝试使用标签导航，并根据点击的标签，我需要根据该标签显示内容并隐藏属于其他标签的内容。我已经包含了tab部分，内部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>

Answer 1

你可以使函数隐藏所有div的内容（jquery .hide（））然后点击li你会调用jquery .show（）函数来显示div与ceratin ID。然后点击另一个li你需要再次隐藏所有内容并只显示一个div。希望我帮助你

Answer 2

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

否则，看起来没问题。也许扔一些alert（）来确保你在某个断点得到正确的数据。

变化：

switch_tabs($('#vol'));

要：

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

并测试

Answer 3

更改

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

到

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

仅显示要单击的选项卡的内容

3 个答案: