Question

我想在同一页面中激活一个标签（当我点击时，所有标签都有ID #tab1，#tab2，#tab3 ...）在#url ...上例如，点击#tab3等链接时激活href="#tab3"。

我认为这很容易但不适合我.. 这是HTML代码：

<div class="tabs p3">
    <ul class="nav">
        <li class="selected"><a href="#tab1">popular</a></li>
        <li class=""><a href="#tab2">featured</a></li>
    </ul>
    <div id="tab1" class="tab-content" style="display: block; ">
        <div class="inner">
            <p>Lorem ipsum dolor elit.</p>
        </div>
    </div>
    <div id="tab2" class="tab-content" style="display: none; ">
        <div class="inner">
            <p>Phasellus non mi vel turpis gravida rhoncus eget lacinia tellus.</p>
        </div>
    </div>
</div>

因此，如果我点击<a href="#tab2">，则会激活#tab2。没问题。但是，如果我在页面的任何位置插入<a href="#tab2">链接，则此链接不会激活此标签...
可能我需要在<a name="tab2">上创建#tab2这样的锚点？但它不起作用。

以下是我用于标签的javascript代码：

$(function(){
    tabs.init();
}); 
tabs = {
    init : function(){
        $('.tabs').each(function(){
            $(this).find('.tab-content').hide();
            $($(this).find('ul.nav .selected a').attr('href')).fadeIn(300);
            $(this).find('ul.nav a').click(function(){
                $(this).parents('.tabs').find('.tab-content').hide();
                $($(this).attr('href')).fadeIn(300);
                $(this).parent().addClass('selected').siblings().removeClass('selected');
                return false;
            });
        });
    }
}

Answer 1

我现在对你的了解有点了解。

好吧，如果您希望内的链接 - 标签内容指向同一组的其他标签，您可以执行以下操作：

// find all <a> with href start with a '#' in tab-content $tab.find('.tab-content a[href^="#"]').click(function(e) { $tab.find('.nav a[href="' + $(this).attr('href') + '"]').trigger('click'); return false; });

这是完整的代码，有点优化（查看注释）：

$('.tabs').each(function() { // save $(this) (the .tabs container) for re-use var $tab = $(this); $tab.find('.tab-content').hide(); $($tab.find('.nav .selected a').attr('href')).fadeIn(300); $tab.find('.nav a').click(function(){ // save $(this) (the clicked link) for re-use var $a = $(this); $a.parents('.tabs').find('.tab-content').hide(); $($a.attr('href')).fadeIn(300); $a.parent().addClass('selected').siblings().removeClass('selected'); return false; }); // find all <a> with href start with a '#' in tab-content $tab.find('.tab-content a[href^="#"]').click(function(e) { $tab.find('.nav a[href="' + $(this).attr('href') + '"]').trigger('click'); return false; }); });

<强> DEMO

如果您希望页面上的链接以打开任何标签组的特定标签，则这是一个更复杂的问题。

为什么不转向已经存在的全功能插件，以获得类似以下标签系统：

jQuery UI Tabs

jQuery Tools Tabs

如何使用锚点激活JavaScript中的选项卡

1 个答案: