😸

js タグ機能スクリプト　紹介

2025/02/28に公開

function search(str){
  let parent = document.getElementById('link_section');
  let cNodes = parent.children; // 要素ノードのみを取得
  
  for (let i = 0; i < cNodes.length; i++) {
    let element = cNodes[i];
    if (element.classList.contains(str)) {
        element.style.display = "block";
    } else {
        element.style.display = "none";
    }
}

使い方

検索したい要素の親に一意のIDを設定してください(link_section)
子要素に検索したいタグ名をクラスとして登録してください。
クラスは一つのみ設定可能です。
複数設定するとうまくいきません。

あとは関数を呼び出せば、検索可能です。

 <div class="item green" onclick="search('A')">
      <p >A</p>
    </div>
    <div class="item green" onclick="search('B')">
      <p >B</p>
    </div>
    <div class="item green" onclick="search('C')">
      <p >C</p>
    </div>
<div id = "link_section">
    <a href="#" class ="A">AAAAAAA</a>
    <a href="#" class ="A">AAAAAAA</a>

    <a href="#" class ="B">BBBBBBB</a>
    <a href="#" class ="B">BBBBBBB</a>
    <a href="#" class ="B">BBBBBBB</a>
    <a href="#" class ="C">CCCCCCCCC</a>
    <a href="#" class ="C">CCCCCCCCC</a>
    <a href="#" class ="C">CCCCCCCCC</a>
    <a href="#" class ="C">CCCCCCCCC</a>
    <a href="#" class ="C">CCCCCCCCC</a>
</div>

以下お試し用全文

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="item green" onclick="search('A')">
        <p >A</p>
      </div>
      <div class="item green" onclick="search('B')">
        <p >B</p>
      </div>
      <div class="item green" onclick="search('C')">
        <p >C</p>
      </div>
  <div id = "link_section">
      <a href="#" class ="A">AAAAAAA</a>
      <a href="#" class ="A">AAAAAAA</a>
  
      <a href="#" class ="B">BBBBBBB</a>
      <a href="#" class ="B">BBBBBBB</a>
      <a href="#" class ="B">BBBBBBB</a>
      <a href="#" class ="C">CCCCCCCCC</a>
      <a href="#" class ="C">CCCCCCCCC</a>
      <a href="#" class ="C">CCCCCCCCC</a>
      <a href="#" class ="C">CCCCCCCCC</a>
      <a href="#" class ="C">CCCCCCCCC</a>
  </div>
</body>
<script>


function search(str){
    let parent = document.getElementById('link_section');
    let cNodes = parent.children; // 要素ノードのみを取得
    
    for (let i = 0; i < cNodes.length; i++) {
        let element = cNodes[i];
        if (element.classList.contains(str)) {
            element.style.display = "block";
        } else {
            element.style.display = "none";
        }
    }
}

</script>

<style>
    #link_section a{
  display: block;
  text-decoration:none;
  color: rgb(66, 66, 66);
  padding: 20px;
  border-radius:5px;
  border: 2px solid #f0f0f0;

}

.item {

  width: 30px;
  padding: 8px;
  
  margin: 5px;
  text-align: center;
  border-radius:5px;
  box-shadow: 5px 5px 3px 3px #bbb;   /* 影指定 */
  user-select: none;
}
.item p{
  font-size: 15px;
  font-weight: 800;
  color: rgb(0, 0, 0);
  line-height: 0;
}

</style>
</html>

styleは今回の機能と関係ありません。ご自由に変更ください。

使い方

Discussion