Question

我正在尝试使用制表符激活左列中的Coda滑块和页面中心的选项卡式内容。滑块已激活但选项卡未激活。

这是页面顶部的jquery：

$(".tab_content").hide();
$("ul.tabs li:first").addClass("current_page_item").show();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("current_page_item");
    $(this).addClass("current_page_item");
    $(".tab_content").hide();
    var activeTab = $(this).find('id').attr('a');
    //alert(activeTab);
    $(activeTab).show('slow'); 
    return false;
}

我试过两个.attr（'a'）;和.attr（'id'）;但只有滑块触发，标签容器变为空白。

我是新手，只是想学习javascript和jquery。我一直在很多论坛上阅读，但找不到任何人试图用一组标签来激活两个标签或滑块容器。

非常感谢您的帮助。

<div id="menu"> 
    <ul class="tabs"> 
       <li><a href="#0" class="xtrig" rel="coda-slider-1" id="tab0">Why Us?</a></li>     
       <li><a href="#1" class="xtrig" rel="coda-slider-1" id="tab1">CCW Class</a></li> 
       <li><a href="#2" class="xtrig" rel="coda-slider-1" id="tab2">Beginner</a></li> 
       <li><a href="#3" class="xtrig" rel="coda-slider-1" id="tab3">Advanced</a></li> 
    </ul>
</div>

Answer 1

var activeTab = $(this).find('id').attr('a');似乎必须是var activeTab = $(this).find('a').attr('id');

Answer 2

这里有一个问题：

var activeTab = $(this).find('id').attr('a');

这将查找标签“id”的“a”属性和元素。 HTML中没有<id a='something'></id>标记。我假设你试图在“this”中找到A标签：

var activeTab = $(this).find('a')

在这一行：

$(activeTab).show('slow');

jQuery查找OBJECT引用，因此您不需要获取对象的ID，只需要获取对象本身，这就是为什么您不需要$(this).find('a')中的ID

此外，

return false;

如果您没有从其他寻找返回值的地方调用该函数，则返回值没有意义。只需删除它。

Answer 3

这样可以触发两个coda滑块并通过单击选项卡更改选项卡容器。 `

            });
            $(".tab_content").hide(); //Hide al content
            $("ul.tabs li:first").addClass("current_page_item").show();//Activate first tab
            $(".tab_content:first").show();//Show first tab content
            //On Click Event
            $("ul.tabs li").click(function() {
                $("ul.tabs li").removeClass("current_page_item");
                $(this).addClass("current_page_item");

                $(".tab_content").hide(); //hide all content tabs
                var activeTab = $(this).data('getTab'); //get the html5 data element
                //var selectTab = "#"+activeTab;
                //alert(activeTab); //debugging
                //$(activeTab).show('slow'); 
                $(activeTab).fadeIn();
                return false;

            });


<ul class="tabs">
    <li data-getTab="#content0"><a href="#1" class="xtrig" rel="coda-slider-1" >Why Us?</a></li>
    <li data-getTab="#content1"><a href="#1" class="xtrig" rel="coda-slider-1" >CCWClass</a></li>
    <li data-getTab="#content2"><a href="#2" class="xtrig" rel="coda-slider-1" >Beginner</a></li>
    <li data-getTab="#content3"><a href="#3" class="xtrig" rel="coda-slider-1" >Advanced</a></li>

`

它最多可更改九个标签容器，左侧列中有相应的尾部滑块面板。谢谢大家。

需要一组选项卡来激活两个容器

3 个答案: