2013-04-10 46 views
0

我有一個div菜單的問題。div菜單的默認值

我希望將data-link變量的值設置爲first,這樣當我最初加載頁面時,菜單下方會出現ffffffffffff行。由於現在的代碼,該行將是空的。

然後,如果我點擊菜單上的另一個項目,新菜單項的內容將覆蓋以前的內容。

<div id="menu_about"> 
    <a class="link" href="#about" data-link="first"> 
     &nbsp;&nbsp; Why We Exist 
    </a> &#8226; 
    <a class="link" href="#about" data-link="second">Who We Are</a> &#8226; 
    <a class="link" href="#about" data-link="third">What We Do</a> &#8226; 
    <a class="link" href="#about" data-link="fourth">How We Think</a> &#8226; 
    <a class="link" href="#about" data-link="fifth">Where We Are Going</a> 
</div> 
<div id="pages_about" class="textContainer_about"> 
    <div class="textWord_about" data-link="first"> 
     <p>ffffffffffff</p> 
    </div> 
    <div class="textWord_about" data-link="second"> 
     <p>ffffffffffffffffff</p> 
    </div> 
    <div class="textWord_about" data-link="third"> 
     <p>ffffffffffffffffffff</p> 
    </div> 
    <div class="textWord_about" data-link="fourth"> 
     <p>ffffffffffffffffffffffffffff</p> 
     <p>ffffffffffffffffffffffffffff</p> 
     <p>ffffffffffffffffffffffffffff</p> 
     <p>ffffffffffffffffffffffffffff</p> 
     <p>ffffffffffffffffffffffffffff</p> 
    </div> 
    <div class="textWord_about" data-link="fifth"> 
     <p>fffffffffffffffffffffffffff</p> 
    </div> 
</div> 
$('.textWord_about').hide(); 

$('.link').click(function() { 
    $('.textWord_about').hide();  
    $('.textWord_about[data-link=' + $(this).data('link') + ']').fadeIn({ 
     width: '200px' 
    }, 300); 
}); 
+1

那是雙''標籤上的目的或顯示特別的東西嗎? – 2013-04-10 23:21:04

+0

可能希望包含相關的CSS或設置jsFiddle。 – Scott 2013-04-10 23:24:50

回答

0

你只需要seperatly隱藏他們還是像我一樣 Here 我顯示你想與顯示(顯示)這樣

$('.textWord_about[data-link="first"]').show(); 
+0

Supercool!非常感謝你! – user2268235 2013-04-10 23:35:59

0

的元素選擇所有,但第一個.textWord_about當你最初隱藏它們。

使用:gt(0)

$('.textWord_about:gt(0)').hide(); 

jsfiddle.net/mLfgW

或者.slice(1)

$('.textWord_about').slice(1).hide(); 

jsfiddle.net/mLfgW/1