0

例如，当浏览器地址栏中的 url 为 时http://fiddle.jshell.net/ynts/s5S6U/show/light/#header2-tab3-p2，应执行以下操作：

  1. 点击a href="#header2"元素
  2. 点击a href="#tab3"元素
  3. 点击a href="#p2"元素

我需要什么？

我以前的问题已作为克隆关闭。但是，我仍然需要有关此嵌套选项卡问题的帮助。我认为我找到了一种通过 url 解析技巧来解决这个问题的方法。

我有这个代码：

<ul class='headers'>
    <li><a href='#header1'>→ header 1</a></li>
    <li><a href='#header2'>→ header 2</a></li>
    <li><a href='#header3'>→ header 3</a></li>
</ul>
<div id='header1'>
    Hi, this is header1.<hr>
</div>
<div id='header2'>
    This is the header2.<hr>
    <ul class='tabs'>
        <li><a href='#tab1'>header2 → tab1</a></li>
        <li><a href='#tab2'>header2 → tab2</a></li>
        <li><a href='#tab3'>header2 → tab3</a></li>
    </ul>
    <div id='tab1'>
        This is tab1.<hr>
    </div>
    <div id='tab2'>
        This is tab2.<hr>
    </div>
    <div id='tab3'>
        This is tab3.<hr>
        <ul class='ps'>
            <li><a href='#p1'>header2 → tab2 → p1</a></li>
            <li><a href='#p2'>header2 → tab2 → p2</a></li>
        </ul>
        <div id='p1'>
            This is p1.<hr>
        </div>
        <div id='p2'>
            This is p2.<hr>
        </div>
    </div>
</div>
<div id='header3'>
    And this is header3.<hr>
</div>

<div class="helpers">
    <p id="header1-tab1"></p>
    <p id="header1-tab2"></p>
    <p id="header1-tab3"></p>    
    <p id="header2-tab3-p1"></p>
    <p id="header2-tab3-p2"></p>
</div>

$.fn.myTabs = function() {

    return this.each(function() {

        // For each set of tabs, we want to keep track of
        // which tab is active and it's associated content
        var $active, $content, $links = $(this).find('a');

        // If the location.hash matches one of the links, use that as the active tab.
        // If no match is found, use the first link as the initial active tab.
        $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
        $active.parent('li').addClass('active');
        $content = $($active.attr('href'));


        // Hide the remaining content
        $links.not($active).each(function () {
                $($(this).attr('href')).hide();
        });

        // Bind the click event handler
        $(this).on('click', 'a', function(e){
                // Make the old tab inactive.
                $active.parent('li').removeClass('active');
                $content.hide();


                // Update the variables with the new link and content
                $active = $(this);
                $content = $($(this).attr('href'));

                // Make the tab active.
                $active.parent('li').addClass('active');
                $content.show();


                // Prevent the anchor's default click action
                e.preventDefault();
        });
    });

};


$('.headers, .tabs, .ps').myTabs();
​

带有此代码和一些样式的 jsfiddle：jsfiddle.net/ynts/s5S6U。

4

1 回答 1

1

鉴于：

<a class="blah" href="/#header2-tab3-p2">Click me</a>

...做：

$('a.blah').click(function(){
    // Grab href, shave first two chars off, split on "-", operate on each
    var hrefs = $(this).attr('href').substr(2).split('-');
    $(hrefs).each(function(){
        $('a[href="#' + $(this) + '"]').trigger('click');
    });
});

那应该工作

于 2012-12-05T01:02:12.677 回答