0

「ul.tab_nav li a」がクリックされたときにクラス「current_tab」を「ul.tab_nav li」に適用しようとすることを除いて、これはすべて機能します。

JQuery

$(document).ready(function(){
$('.tabs').each(function(){
    var tab = $(this);
    tab.find('.tab_content').hide(); // Hide all divs

    tab.find('ul.tab_nav li a').click(function(){ //When any link is clicked
        tab.find('ul.tab_nav li a').removeClass('current_tab'); // Remove active class from all links
        tab.addClass('current_tab'); //Set clicked link class to active

        var currentTab = tab.find($(this).attr('href')); // Set variable currentTab to value of href attribute of clicked link

        tab.find('.tab_content').slideUp(); // Hide all divs
        $(currentTab).slideDown(); // Show div with id equal to variable currentTab
        return false;
    });
});
});

とhtml

   <div class="box tabs siteBackgroundColor">
    <div class="box_header">
        <ul class="tab_nav">
            <li class="dummyTab"><a href=".tab1" class="iconTab">&nbsp;</a></li>
            <li><a href=".tab2" class="iconTab iconTabWifi">&nbsp;</a></li>
            <li><a href=".tab3" class="iconTab iconTabWeb">&nbsp;</a></li>
            <li><a href=".tab2" class="iconTab iconTabHours">&nbsp;</a></li>
            <li><a href=".tab4" class="iconTab iconTabMap">&nbsp;</a></li>
            <li><a href=".tab3" class="iconTab iconTabPhone">&nbsp;</a></li>
            <li><a href=".tab4" class="iconTab iconTabShare">&nbsp;</a></li>
        </ul>
    </div>
    <div class="box_content tab_content tab1 dummyTab"></div>
    <div class="box_content tab_content tab2">
        <p><span class="textBold">HRS:</span> Mon-Fri 7am to 3pm, Saturday 8am to 3pm <span class="textBold">KITCHEN CLOSES</span> at 2:30pm</p>
    </div>
    <div class="box_content tab_content tab3">3<br />
        3<br />
        3<br />
        3</div>
    <div class="box_content tab_content tab4">4<br />
        4<br />
        4<br />
        4<br />
        4</div>
</div>

それに加えて、それは私が必要とする方法で機能しています。

4

3 に答える 3

2

これを試して、

tab.find('ul.tab_nav li').removeClass('current_tab');
$(this).closest('li').addClass('current_tab'); //Set clicked link li to active

デモ1

activeリンクのみを設定するには、試してください。

tab.find('ul.tab_nav li a').removeClass('current_tab');
$(this).addClass('current_tab'); //Set clicked link class to active

デモ 2

代わりに

 tab.addClass('current_tab'); //Set clicked link class to active

hide()代わりに使用する必要がある更新されslideup()たものは、クロージングをアニメーション化せず、それがあなたのものであるかどうかdivを確認してから、そのために使用しますactive tabcurrent_tabreturn falseanchor click

デモ 3

于 2013-10-17T05:05:03.437 に答える
1

次のコードを置き換えてみてください

tab.find('ul.tab_nav li a').removeClass('current_tab'); // Remove active class from all links
tab.addClass('current_tab'); //Set clicked link class to active

と

tab.find('ul.tab_nav li').removeClass('current_tab'); // Remove active class from all links
$(this).parent().addClass('current_tab'); //Set clicked link class to active

フィドル http://jsfiddle.net/HMS37/

于 2013-10-17T05:06:37.983 に答える
0

簡単に学習できるように、コードを編集します。 

$(document).ready(function(){
    $('.tabs').each(function(){
        var tab = $(this);
        tab.find('.tab_content').hide(); // Hide all divs

    tab.find('.tab_nav li a').click(function(){ //When any link is clicked
        tab.find('.tab_nav li').removeClass('current_tab'); // Remove active class from all links
        tab.addClass('current_tab'); //Set clicked link class to active

        var currentTab = tab.find($(this).attr('href')); // Set variable currentTab to value of href attribute of clicked link

        tab.find('.tab_content').slideUp(); // Hide all divs
        $(".currentTab").slideDown(); // Show div with id equal to variable currentTab
        return false;
    });
});
});
于 2013-10-17T05:06:38.273 に答える