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 に答える