0

タブをクリックすると、そのタブに固有のdivが表示される単純なタブビューに次のjqueryコードを使用しています。これは、ul.tabs プロパティ内のタブをクリックした場合にのみ機能します。コードを調整して、ul.tabs リスト外の同じページにあるリンクを許可して、必要な div を表示するにはどうすればよいですか?

    $(document).ready(function(){
    $('ul.tabs').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');

        // Use the first link as the initial active tab
        $active = $links.first().addClass('active');
        $content = $($active.attr('href'));

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

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

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

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

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

html は次のとおりです。

            <ul class="tabs">
          <li><a href="#photo_tab">Photos</a></li>
        </ul>
        <div id="photo_tab" class="tabcontent">
          <h3>Section 1</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis placerat dolor id aliquet. Sed a orci in justo blandit commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
        </div>

したがって、ページの別の場所にあるリンクで href="#photo_tab" を使用して、photo_tab div を表示し、アクティブなタブを表示したいと考えています。

4

1 に答える 1

0

正しいタブでクリックトリガーを手動で起動できます。

HTML:

<div class="extlink" data-tabid="photo_tab">click me!</div>


<ul class="tabs">
   <li><a href="#photo_tab" id="photo_tab">Photos</a></li>
</ul>

JS:

$('.extlink').click(function(){
    var tabid = $(this).attr('data-tabid');    // this gets the id of the element you want to trigger
    $('#'+tabid).click();   /// this acts as if you clicked on that tab element
});
于 2012-08-01T13:32:31.510 に答える