javascript - JQuery 选项卡无法切换

Question

我的脚本有问题，我总是用它来切换选项卡。我在页面的其他地方使用 jquery，因此该库正在工作。只是不会切换？

这是我的演示:

Fiddle

这是代码，真的不确定为什么失败？

<div id="buttons">
    <ul>
        <li id="intro" class="selected">Link1</li>
        <li id="teachers">Link2</li>
        <li id="learners" class="last">Link3</li>
    </ul>
</div>

<div id="introcontent" >
    <p>lksdjflksdjfklsdjfklsjfkl</p>
</div>

<div id="teacherscontent" >
    <p>lsdklfjsdklfjdlsjflkdsj.</p>
</div>

<div id="learnerscontent" >
    <p>sdlkhfskldfjhlksdjflksdj/a>.</p>
</div>


    #buttons{
        float:right;
        left:-50%;
        position:relative;
        text-align:left;
    }
    #buttons ul{
        list-style:none; 
        position:relative;
        left:50%;
        margin-top:96px;
        font-size:18px;
    }

    .light #buttons ul {
        margin-top:80px;

    }
    #buttons li{
        float:left;
        position:relative;
        height:38px;
        line-height:38px;
        margin-right:47px;

        border-top:2px solid #E6E8E8;
        cursor:pointer;
    }
    #buttons li.last{
        margin-right:0px;
    }
    #buttons li.selected{
        color:#FF5500;
        border-top:2px solid #FF5500;
    }

    #introcontent, #teacherscontent, #learnerscontent {
        padding-top:200px;
        margin-bottom:180px;

    }
    #teacherscontent, #learnerscontent {


display:none;
}



// Change tab class and display content
$('#buttons').on('click', function (event) {
    event.preventDefault();
    $('#introcontent').removeClass('#teachersoontent');
    $(this).parent().addClass('tab-active');
    $('.tabs-stage div').hide();
    $($(this).attr('href')).fadeIn();
});

$('.tabs-nav a:first').trigger('click'); // Default

Answer 1

因此， fiddle 中的代码无法正常工作的原因有很多。

它正在寻找一个 href 来知道要显示哪个 div，但没有。

我像这样更新了您的 HTML，向所有将显示内容的 div 添加了一个公共(public)类，以便更轻松地将它们作为一个组进行操作:

<div id="introcontent" class="tabContent">
    <p>lksdjflksdjfklsdjfklsjfkl</p>
</div>

<div id="teacherscontent" class="tabContent">
    <p>lsdklfjsdklfjdlsjflkdsj.</p>
</div>

<div id="learnerscontent" class="tabContent">
    <p>sdlkhfskldfjhlksdjflksdj.</p>
</div>

并修改了 JavaScript 以与内容上的新类一起使用，而不必担心 href 属性。

// Change tab class and display content
$('#buttons li').on('click', function (event) {    // this lets you click on any li element inside #buttons
    $(".selected").removeClass('selected');    // remove the selected class wherever it may be
    $(this).addClass('selected');    // add the selected class to the clicked element
    $(".tabContent").hide();    // hide all the elements with the class tabContent (added above)
    $("#" + $(this).prop("id") + "content").show();    // show the content we want, by taking the ID of the list element and concatenating it into a string that will match the id of one of the content divs
});

$('#buttons li:first').click(); // You can trigger a click event like this

这是更新的 fiddle 。

http://jsfiddle.net/YH3f4/2/