0

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');
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 に答える