1

これに関する他の投稿を読みましたが、タブがクリックされたときにページが一番上にジャンプする可能性があります。ここにHTMLがあります

<ul class="tabs-nav">
    <li class="active"><a href="#tab1"><i class="icon-list-ul"></i> Tab 1</a></li>
    <li><a href="#tab2"><i class="icon-map-marker"></i> Tab 2</a></li>
</ul>

<!-- Tabs Content -->
<div class="tabs-container">
    <div class="tab-content" id="tab1">Stuff</div>
    <div class="tab-content" id="tab2">Stuff</div>
</div>

そしてここにjsがあります...

(function() {

    var $tabsNav    = $('.tabs-nav'),
        $tabsNavLis = $tabsNav.children('li'),
        $tabContent = $('.tab-content');

    $tabsNav.each(function() {
        var $this = $(this);

        $this.next().children('.tab-content').stop(true,true).hide()
                                             .first().show();

        $this.children('li').first().addClass('active').stop(true,true).show();
    });

    $tabsNavLis.on('click', function(e) {
        var $this = $(this);

        $this.siblings().removeClass('active').end()
             .addClass('active');

        $this.parent().next().children('.tab-content').stop(true,true).hide()
                                                      .siblings( $this.find('a').attr('href') ).fadeIn();

        e.preventDefault();

    });

})();

今、私は追加してみました

onclick="return false;"

htmlのタブhrefに移動しますが、それは何もしていません。どんな助けでも大歓迎です！ありがとう！

4

1 に答える 1

1

このため、トップにジャンプします<a href="#tab1">

別の属性を使用して、開く必要のあるdivを特定してみてください。たとえば、<a href="javascript:void(0);"で始まる任意の属性を追加し て、その属性を読み取ることができます。data-data-id="#tab1

または、HTMLの設定方法を再考することもできます。

あなたが本当に物事を彼らのように保つ必要があるなら、あなたは試すことができます

 var $tabsNav    = $('.tabs-nav'),
        $tabsNavLis = $tabsNav.children('a'),  //this line changed
        $tabContent = $('.tab-content');

それから：

 $tabsNavLis.on('click', function(e) {
        e.preventDefault();   //now this is <a> click , not <li> click
        var $this = $(this).parent();
        $this.siblings().removeClass('active').end()
             .addClass('active');
        $this.parent().next().children('.tab-content').stop(true,true).hide()
                                                      .siblings( $this.find('a').attr('href') ).fadeIn();


    });
于 2012-11-20T02:42:32.520 に答える