我正在尝试使用jQuery制作可点击的选项卡

I am trying to make clickable tabs using jQuery

本文关键字：选项 jQuery      更新时间：2023-09-26

我正在尝试使用JavaScript制作可点击的标签，当我当前点击标签时，一切都消失了。有什么建议吗？

HTML:

<div id="contentwrap" class="round">
        <h1>About Eclipse</h1>
        <div class="tabs">
            <ul class="tabsnav cf">
                <li><a href="#ct-who">who we are</a></li>
                <li><a href="#ct-what">what we do</a></li>
                <li><a href="#ct-how">how you can join</a></li>
            </ul>
            <div class="tab" id="ct-who">
                <p>Eclipse is a fake JavaScript community website being provided as a design element for students in the WDDBS SFWO course.</p><p>And yes, I realize this is also the name of a popular editor; but JS developers don't need that, because we're too rockstar for it.  Instead, this name represents what your earned skill will accomplish for you.. eclipse the competition.</p><p>PS - The cake is not a lie.</p>
            </div>
            <div class="tab" id="ct-what">
                <p>What we do is undefinable, not because there is no data type or testable typeof operator for our work, but because no words can describe the awesomeness of JavaScript coding joy once you've reached enlightenment.  Learn to revel in the beauty of the language, and great power shall be bestowed upon you.</p>
                <p><img src="#" /></p>
            </div>
            <div class="tab" id="ct-how">
                <p>You've already joined our elite ranks.  Now prove thee knoweth jquery.</p>
            </div>
        </div>
    </div>

JavaScript:

$('#contentwrap p').hide().eq(0).show();
$('#contentwrap p:not(:first)').hide();
$('#contentwrap ul li').click(function(event) {
    event.preventDefault();
    $('p').hide();
    $('#contentwrap .current').removeClass("current");
    $(this).addClass('current');
    var clicked = $(this).find('a:first').attr('href');
    $('#ct-how, #ct-what, #ct-who ' + clicked).fadeIn('400');
}).eq(0).addClass('current');

您的fadeIn方法没有选择单击的元素。此外，您还隐藏了<p>元素，并试图在它们的容器中淡入。试试这个：

$('#contentwrap ul li').click(function(event) {
    event.preventDefault();
    $('p').hide();
    $('#contentwrap .current').removeClass("current");
    $(this).addClass('current');
    var clicked = $(this).find('a:first').attr('href');
    $(clicked).find('p').fadeIn('400');
}).eq(0).addClass('current');

演示

相关文章：