javascript - 如何使用jquery隐藏/显示

Question

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

我的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>

Jquery代码

function category(val){
    $(".subcat_"+ val).show();

}

Answer 1

您可以使用 Attribute Starts With Selector 隐藏所有内容在显示特定部分之前:

function category(val){
  $("[class^=subcat_").hide();
  $(".subcat_"+ val).show();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>