0

I am trying to make clickable tags using JavaScript when I currently click on the tabs everything disappears. Any Suggestions?

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');
4

1 回答 1

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

示范

于 2013-08-15T22:08:38.267 回答