Question

我正在尝试使用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');

Answer 1

您的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');

Demonstration

我正在尝试使用jQuery制作可点击的标签

1 个答案: