如何顯示和隱藏部分？

-1

例如：

我點擊HTML鏈接分類的<div id="categories" ... >將顯示與其他分區的將隱藏。

HTML

<div id="col-navigation"> 
     <ul> 
      <li> 
       <a href="#"> Quizzes </a> 
      </li> 
      <li> 
       <a href="#"> Categories </a> 
      </li> 
      <li> 
       <a href="#"> Jump </a> 
      </li> 
     </ul> 
</div> 

<div id="quizzes"> //default showed 
    Quizzes! 
</div> 

<div id="categories" style="display:none"> 
    Categories! 
</div> 

<div id="jump" style="display:none"> 
    Jump! 
</div>

來源

2016-03-30 Van Adrian Cabrera

所以什麼都嘗試過的，什麼？ – JordanHendrix

[顯示一個div並在點擊鏈接時隱藏他人]的可能重複（http://stackoverflow.com/questions/18055524/show-one-div-and-hide-others-on-clicking-a-link） – TylerH

試試這個： -

$('#col-navigation a').click(function(){ 
    $('#quizzes,#categories,#jump').hide(); 
    $('#' + $.trim($(this).text()).toLowerCase()).show(); 
});

Fiddle

$('#col-navigation a').click(function(){ 
    $('#quizzes,#categories,#jump').show() 
    .not('#' + $.trim($(this).text()).toLowerCase()).hide(); 
});

Fiddle

來源

2016-03-30 16:31:23

$("#col-navigation a").click(function(e) { 
    var getText = $(this).text().trim().toLowerCase(); 
    $("#"+getText).toggle().siblings().hide(); 
    e.preventDefault(); 
});

使用上述代碼使其工作。

工作小提琴：https://jsfiddle.net/z4bprass/1/

來源

2016-03-30 16:31:36 ameenulla0007

請查看我的問題。我只想顯示點擊的HTML鏈接。 –

您可以使用css:target，一般的兄弟姐妹選擇~

:target { 
 
    display: block !important; 
 
} 
 
:target ~ div[id] { 
 
    display: none; 
 
}

<div id="col-navigation"> 
 
    <ul> 
 
    <li> 
 
     <a href="#quizzes"> Quizzes </a> 
 
    </li> 
 
    <li> 
 
     <a href="#categories"> Categories </a> 
 
    </li> 
 
    <li> 
 
     <a href="#jump"> Jump </a> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 

 
<div> 
 
    <div id="categories" style="display:none"> 
 
    Categories! 
 
    </div> 
 

 
    <div id="jump" style="display:none"> 
 
    Jump! 
 
    </div> 
 

 
    <div id="quizzes">//default showed Quizzes! 
 
    </div> 
 
</div>

來源

2016-03-30 16:37:31 guest271314

jsfiddle https://jsfiddle.net/u1y22bu7/ – guest271314

如何顯示和隱藏部分？

回答

相關問題