Question

我的脚本出现问题，我总是用它来切换标签。我在我的页面上的其他地方使用jquery，因此库正在运行。只是不会切换？

这是我的演示：

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

<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

因此，为什么你的小提琴中的代码不起作用有很多原因。

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

我更新了你的HTML，为所有显示内容的div添加了一个公共类，以便更容易将它们作为一个组进行操作：

<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

这是更新的小提琴。

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

JQuery选项卡没有切换

1 个答案: