如何显示和隐藏部分？

-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

如何显示和隐藏部分？

回答

相关问题