Javascript 如何使用jquery隐藏/显示

我的菜单有不同的类别，每个类别有不同的部分。如果我点击一个类别，相关的部分应该显示，铰孔部分应该隐藏。我不想要更多的代码需要减少代码行请任何人帮助我

我的html代码

 <ul>
  <li><a class="cat_1" href="#home" onclick="category(1)">Section One</a></li>
  <li><a class="cat_2" href="#news" onclick="category(2)">Section Two</a></li>
  <li><a class="cat_3" href="#contact" onclick="category(3)">Section three</a></li>
  <li><a class="cat_4" href="#about" onclick="category(4)">Section four</a></li>
</ul>

<div class="subcat_1" style="display: none;">
  <h1>Section One</h1>
  <p>Section One</p>
</div>

<div class="subcat_2" style="display: none;">
  <h1>Section Two</h1>
  <p>Section Two</p>
  <p>Section Two</p>
  <p>Section Two</p>
  <p>Section Two</p>
</div>

<div class="subcat_2" style="display: none;">
  <h1>Section Two</h1>
  <p>Section Two</p>
</div>

<div class="subcat_3" style="display: none;">
  <h1>Section three</h1>
  <p>Section three</p>
</div>
<div class="subcat_4" style="display: none;">
  <h1>Section four</h1>
  <p>Section four</p>
</div>
<div class="subcat_4" style="display: none;">
  <h1>Section four</h1>
  <p>Section four</p>
</div>

你试过了吗

$(".subcat_"+ val).toggle();

---

？

尝试使用Jquery设置css属性

因此：

像这样的？ 但是，您必须在其他函数中将其设置回

.css（“显示”、“无”）

。

您可以在显示特定部分之前隐藏所有使用：

功能类别（val）{
$（“[class^=subcat_”）.hide（）；
$（“.subcat_”+val）.show（）；
}

第一节
第一节

第二节
第二节

第二节

第二节

第二节

第二节
第二节

第三节
第三节

第四节
第四节

第四节
第四节

您可以将此用于显示/隐藏部分

function category(val){
    $(".subcat_"+ val).show();
    $("div[class^='subcat_']").each(function(index, item){
       //console.log(1)
       if(!$(this).hasClass("subcat_"+ val)){
          $(this).hide();
       }
    })
}

功能类别（val）{
$（“.subcat_”+val）.show（）；
$（“div[class^='subcat']）。每个（函数（索引，项）{
//控制台日志（1）
if（！$（this）.hasClass（“subcat_”+val））{
$（this.hide（）；
}
})
}

第一节
第一节

第二节
第二节

第二节

第二节

第二节

第二节
第二节

第三节
第三节

第四节
第四节

第四节
第四节

非常感谢您节省了我的时间，这是一项完美的工作，我期待再次感谢Mamunc您能说得更具体一点吗？

$(".subcat_"+ val).css("display", "block");

function category(val){
    $(".subcat_"+ val).show();
    $("div[class^='subcat_']").each(function(index, item){
       //console.log(1)
       if(!$(this).hasClass("subcat_"+ val)){
          $(this).hide();
       }
    })
}