JQuery 4按钮菜单，点击隐藏div并显示其他人，反之亦然

Question

我的网站上有四个按钮。当您单击一个按钮时，该按钮本身应该变得不可见，并且新文本应该变得可见。当您单击该链接时，其他文本应该是不可见的，并且其他菜单按钮应该是可见的。

为了说明我的意思，我列了一个清单。在此列表中，您可以看到单击某些按钮时应该发生什么，以及打开网站时应该发生什么：

---

当您打开网站时，应该是这样的： ".menu-home-link, .menu-government-text, .menu-voice-text, .menu-news-text" 应该被隐藏，并且 ".menu-home- text, .link-your-voice, link-nation-news, .link-government" 应该是可见的。

---

当你点击一个菜单按钮时我想要发生的事情：

如果你点击"Menu-home-link" -> ".menu-home-link, .menu-government-text, .menu-voice-text, .menu- news-text" 应隐藏，".menu-home-text, .link-your-voice, link-nation-news, .link-government" 应可见。

如果您点击 ".link-your-voice" -> ".link-your-voice, .menu-government-text, .menu-home-text, .menu -news-text" 应隐藏，".menu-voice-text, menu-home-link, link-nation-news, .link-government" 应可见。

如果你点击".link-nation-news" -> ".link-nation-news, .menu-government-text, .menu-home-text, .menu -voice-text" 应隐藏，".menu-news-text, Menu-home-link, link-your-voice, .link-government" 应可见。

如果你点击".link-government" -> ".link-government, .menu-news-text, .menu-home-text, .menu-voice-text " 应隐藏，".menu-government-text, Menu-home-link, link-your-voice, .link-nation-news" 应可见。 p>

---

目前我有以下 jQuery 代码，我尝试在所有可能的情况下复制它，但它不起作用。有人可以帮我完成上述点击吗？

<script>
$(function () {

    $(".menu-home-link, .menu-government-text, .menu-voice-text, .menu-news-text").hide();

    $(".link-government, .link-home, link-your-voice, link-nation-news").bind("click", function () {

      $(".menu-home-link, .menu-home-text").hide();        

      if ($(this).attr("class") == "link-government")
      {
        $(".menu-home-link, .link-your-voice, .link-nation-news").show();
          $(".menu-government-text").show();
          $(".link-government").hide();
      }
      else 
      { 
        $(".menu-home-text").show();
          $(".link-government").show();
          $(".menu-government-text").hide();
      }       
    });

});
<script>

它必须使用以下 HTML：

        <div class="menu-home">
            <!-- The first link -->
            <div class="menu-home-link"><a href="#" class="link-home"><span data-hover="Home" >Home</span></a></div>
            <!-- -->
            <!-- The first content -->
            <div class="menu-home-text"><div class="menu-homeline"></div><div class="menu-topline"></div><div class="menu-home-slogan">TODAY,<br>TOMORROW,<br>FOREVER.</div>
            <div class="menu-bottomline"></div></div>
            <!-- -->
        </div>
        <div class="menu-government">
            <!-- The second link -->
            <a href="#" class="link-government"><span data-hover="The Government">The Government</span></a>
            <!-- -->
            <!-- The second content -->
            <div class="menu-government-text"><div class="menu-governmentline"></div><div class="menu-topline"></div><div class="menu-home-slogan">THE<br>GOVERNMENT</div>
            <div class="menu-bottomline"></div>
            <!-- -->
        </div>
        <div class="menu-your-voice">
            <!-- The third link  -->
            <a href="#" class="link-your-voice"><span data-hover="Your Voice">Your Voice</span></a>
            <!-- -->
            <!-- The third content -->
            <div class="menu-voice-text"><div class="menu-governmentline"></div><div class="menu-topline"></div><div class="menu-home-slogan">YOUR<br>VOICE</div>
            <div class="menu-bottomline"></div>
            <!-- -->
        </div>
        <div class="menu-news">
            <!-- The fourth link -->
            <a href="#" class="link-nation-news"><span data-hover="Nation News">Nation News</span></a>
            <!-- -->
            <!-- The fourth content -->
            <div class="menu-news-text"><div class="menu-governmentline"></div><div class="menu-topline"></div><div class="menu-home-slogan">NATION<br>NEWS</div>
            <div class="menu-bottomline"></div>
            <!-- -->
        </div>

亲切的问候， 米兰

Answer 1

你的意思是这样的？

$("nav a").click(function( e ){
  e.preventDefault();
  $("nav .active, #pages .active").removeClass("active");
  $(this).add( $(this.hash) ).addClass("active");
});

nav li{
  display:inline-block;
  list-style:none;
  padding:10px;
}
nav a.active{
  display:none;
}
#pages > div{
  display:none;
}
#pages .active{
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul>
    <li><a href="#a" class="active">a</a></li>
    <li><a href="#b">b</a></li>
    <li><a href="#c">c</a></li>
    <li><a href="#d">d</a></li>
  </ul>
</nav>

<div id="pages">
  <div id="a" class="active">A text</div>
  <div id="b">B text</div>
  <div id="c">C text</div>
  <div id="d">D text</div>
</div>