要素に応じて表示するクラスを切り替えるJavaScriptのコードを教えてください

Question

headerの要素に応じてページ内のギャラリーを切り替えたいのですが、どうすればいいのかわかりません。Jqueryのtoggleかswitchを適用しようとしたもののうまく出来なかったため、何かアドバイスをいただければ幸いです。

具体的にはheaderのmenをクリックした際gallery-container g-menが表示されその他を非表示に、rediesをクリックした際にはmenと同様　galleryをrediesに切り替えるといった具合です

初歩的な質問で恐縮ですがよろしくお願いします

<header>
    <div class="header-container data-scroll-header">
        <ul>
            <li class="header-menu men">-MEN-</li>
            <li class="header-menu redies">-REDIES-</li>
            <li class="header-menu new">-NEW-</li>
        </ul>
    </div> 
    </header>

中略

<section id="gallery">
    <div class="gallery-head">-gallery-</div>
    <div class="gallery-parent">

    <div class="gallery-container  g-men"> 
            <div class="gallery-head">men</div>
                    <div class="gallery-content">
                            <div class="box"></div>  
                    </div>
    </div>

     <div class="gallery-container  g-redies"> 
            <div class="gallery-head">redies</div>
                    <div class="gallery-content">
                            <div class="box"></div>  
                    </div>
     </div>

     <div class="gallery-container  g-new"> 
            <div class="gallery-head">new</div>
                    <div class="gallery-content">
                            <div class="box"></div>  
                    </div>
     </div>
      
              
   
    </div>
</section>
``` html

Comments

[yambejp]

条件も結果もないので何をしたいのかわかりません

[yohey5991]

申し訳ありません。より具体的な内容を追記致しました。

[Lhankor_Mhy]

具体的にお願いします。
『headerの要素に応じて』とは、具体的には要素の何に応じるのですか？
『ページ内のギャラリーを切り替えたい』とは、具体的にはギャラリーを何に切り替えるのですか？

[2KOH]

> Jqueryのtoggleかswitchを適用しようとしたもののうまく出来なかった
うまく出来なかったコードを提示してください。
コードが提示されていない場合、「headerのmenをクリックした際gallery-container g-menが表示されその他を非表示に、rediesをクリックした際にはmenと同様　galleryをrediesに切り替えるようなコードを書けばいいと思います。」という回答しかできません。

[yohey5991]

申し訳ありません。質問を変えさせていただきます

「headerのmenをクリックした際gallery-container g-menが表示されその他を非表示に、rediesをクリックした際にはmenと同様　galleryをrediesに切り替えるようなjava script/Jqueryのコードの書き方」を教えていただくことは可能でしょうか？

参考サイトを見てもどのように落とし込めばいいのかわからなかったので????

[2KOH]

https://teratail.com/help/avoid-asking
このサイトでは、コードをください・デバッグしてください等の丸投げの質問は非推奨です。
少なくとも自分はそういう質問には基本的に答えたくないので、力になれません。

[miyabi_pudding]

まず、質問文で説明してる、自分で書いてみたjavascriptコードも記載ください。
自身のコードがなければ、丸投げ以前の作業依頼になってしまうかと・・・。

[yohey5991]

申し訳ありません。今後はもっと実力をつけ
よく考えてから質問するようにします。大変失礼いたしました

[miyabi_pudding]

質問は編集できるので、
この質問にコード記載しましょう。
よく考えて、をこの質問からやっていきませんか？

Answer 1

こんな風にするとすっきりするのでは？

<script>
$(function(){
  $('.header-menu').on('click',function(){
    $('.gallery-container').hide().filter($(this).data('target')).show();
  });
});
</script>
<header>
<div class="header-container data-scroll-header">
<ul>
<li class="header-menu" data-target=".g-men">-MEN-</li>
<li class="header-menu" data-target=".g-redies">-REDIES-</li>
<li class="header-menu" data-target=".g-new">-NEW-</li>
</ul>
</div>
</header>
<section id="gallery">
  <div class="gallery-head">-gallery-</div>
  <div class="gallery-parent">
    <div class="gallery-container g-men">
      <div class="gallery-head">men</div>
      <div class="gallery-content">
        <div class="box"></div>
      </div>
    </div>
    <div class="gallery-container g-redies">
      <div class="gallery-head">redies</div>
      <div class="gallery-content">
        <div class="box"></div>
      </div>
    </div>
    <div class="gallery-container g-new">
      <div class="gallery-head">new</div>
      <div class="gallery-content">
        <div class="box"></div>
      </div>
    </div>
  </div>
</section>

Comments

[yohey5991]

ありがとうございます! 解決しました！

分からないことが分からないというような状況の中 ほとんど丸投げな質問にも関わらず
丁寧に回答してくださり本当に助かりました！ありがとうございました！