javascript - 如何使用 anchor 激活 JavaScript 中的选项卡

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"> 这样的 anchor 在我的#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