Question

我似乎无法让我的活动状态更改所单击的项目。我已经搜索了堆栈并尝试了很多方法..

因此下划线应移动到单击的框中。

HTML

<div id="tabmenu">

            <ul id="tab-nav">
                <li class="active">
                    <div><a href="#"><img src="http://via.placeholder.com/120x120"><h2>School Coaching</h2></a></div>
                </li>
                <li class="">
                    <div><a href="#"><img src="http://via.placeholder.com/120x120"><h2>Staff Training &amp; inset</h2></a></div>
                </li>
                <li class="">
                    <div><a href="#"><img src="http://via.placeholder.com/120x120"><h2>Sports Clubs &amp; Camps</h2></a></div>
                </li>
            </ul>

            <div id="tab-content" class="lined-center l-margin-b aligncenter">

                <div id="tab1">
                    <h2><strong>Above all, we provide specialist, trained sports coaches to support sports within schools</strong></h2>
                    <p>Our team of coaches share a common objective; to inspire children through sport...</p>
                    <p>We work closely with the PE and Games departments at various schools. Determining a school’s criteria for success in their deliver of sport is important to establish. Subsequently, our coaches work together with permanent school staff to ensure that every child receives a positive sporting experience.</p>
                </div>

               <div id="tab2">
                    <h2><strong>Above all, we provide specialist, trained sports coaches to support sports within schools</strong></h2>
                    <p>Our team of coaches share a common objective; to inspire children through sport...</p>
                    <p>We work closely with the PE and Games departments at various schools. Determining a school’s criteria for success in their deliver of sport is important to establish. Subsequently, our coaches work together with permanent school staff to ensure that every child receives a positive sporting experience.</p>
                </div>

               <div id="tab3">
                    <h2><strong>Above all, we provide specialist, trained sports coaches to support sports within schools</strong></h2>
                    <p>Our team of coaches share a common objective; to inspire children through sport...</p>
                    <p>We work closely with the PE and Games departments at various schools. Determining a school’s criteria for success in their deliver of sport is important to establish. Subsequently, our coaches work together with permanent school staff to ensure that every child receives a positive sporting experience.</p>
                </div>

            </div>
            <!--Close #tab-content -->

        </div>
        <!--Close .tabmenu-->

JS

// Change tab class and display content
$('#tab-content div').hide();
$('#tab-content div:first').show();

$('#tab-nav li a').click(function() {
    $('#tab-nav li').removeClass("active");
    $(this).find('#tab-nav li').addClass("active");
    $('#tab-content div').hide();

    var indexer = $(this).index(); //gets the current index of (this) which is #nav li
    $('#tab-content div:eq(' + indexer + ')').fadeIn(); //uses whatever index the link has to open the corresponding box 
});

CSS

/* * * * * * * * * * * * * * * * * * * * */
/* TABBED CONTENT STYLING */
/* * * * * * * * * * * * * * * * * * * * */

#tab-nav {
    width:100%;
    height:auto;
    margin:0px auto;
    padding:0px;
    display:block;
    list-style-type:none;
}

#tab-nav li {
    width:27%;
    height:auto;
    margin:0px 3% 0px 0px;
    display:inline-block;
    vertical-align:bottom;

    text-align:center;

    border-bottom:3px solid $white;
    @include transition(all,.10s);

    @media #{$tablet} {
        width:100%;
        height:auto;
        margin:0px;
        display:block;
        border-bottom:0px solid $white;
    }
}

#tab-nav li h2 {
    font-family: $regular-font;
    font-weight:bold;
    font-size:16px;
    letter-spacing:2px;
    line-height:24px;
    color:$white;
    text-transform:uppercase;
     margin-bottom:0px;

    @media #{$tablet} {
        display:inline-block;
        vertical-align:middle;

    }

}

#tab-nav li:hover {
    border-bottom:3px solid $blue;

    @media #{$tablet} {
        border-bottom:0px solid $blue;
    }
}

#tab-nav li.active {
    border-bottom:3px solid $blue;

    @media #{$tablet} {
        border-bottom:0px solid $blue;
    }
}

#tab-nav li:nth-child(3n) {
    margin-right:-5px;
}

#tab-nav li div {
    width:90%;
    padding:35px 5%;
    margin:0px 0px 30px 0px;
    height:auto;
    background-color:#2f3f47;
    text-align:center;
    @include transition(all,.10s);

    @media #{$tablet} {
        padding:15px 5%;
        margin:0px 0px 5px 0px;
        text-align:left;
    }
}

#tab-nav li:hover div {
    background-color:$blue;
}

#tab-nav li img {
    display:block;
    width:70%;
    max-width:120px;
    margin:0px auto 30px auto;

    @media #{$tablet} {
        width:50px;
        display:inline-block;
        vertical-align:middle;
        margin:0px 20px 0px 0px;
    }
}

Answer 1

你可以用它。作品here

   // Change tab class and display content
$('#tab-content div').hide();
$('#tab-content div:first').show();

$('#tab-nav li a').click(function() {
    $('#tab-nav li').removeClass("active");
    $(this).parents("li").addClass("active");
    $("div a h2").prop("style","color:blue");
    $(this).find("h2").prop("style","color:red");

    $("#tab-content").find("div").hide();

    $(this.id).fadeIn(); //uses whatever index the link has to open the corresponding box 
});

Answer 2

你有2个问题

第一次：$(this).find('li').addClass("active");应为$(this).closest('li').addClass("active");

第二次：使用$(this).index();，它总是会返回0，因为只有一个标记，因此您应该获得li索引而不是a索引

只需要.closest('li')

// Change tab class and display content
$('#tab-content div').hide();
$('#tab-content div:first').show();

$('#tab-nav li a').click(function() {
    $('#tab-nav li').removeClass("active");
    $(this).closest('li').addClass("active");
    $('#tab-content div').hide();

    var indexer = $(this).closest('li').index(); //gets the current index of (this) which is #nav li
    $('#tab-content div#tab'+ indexer +').fadeIn(); //uses whatever index the link has to open the corresponding box 
});

Answer 3

非常简单的解决方案是使用HTML5数据id＆amp;而不是绑定事件到<a>标记绑定事件到<li>标记

HTML

<ul id="tab-nav">
   <li class="active" data-id="tab1">
      <div><a href="#"><img src="#"></a></div>
   </li>
</ul>
<div id="tab-content" class="lined-center l-margin-b aligncenter">
   <div id="tab1">
       Tab 1 content
   </div>
</div>

<强> JS

$('#tab-content div').hide();
$('#tab-content div:first').show();

$('#tab-nav li').click(function(e){
     var tabId = $(this).attr('data-id');
     $('#tab-nav li').removeClass('active');
     $(this).addClass('active');
     $('#tab-content div').hide(); // hide all div
     $('#'+tab).show().fadeIn(); // display selected div
});

活动状态Jquery无法正常工作

3 个答案: