Question

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

为了说清楚我的意思，我已经列出了清单。在此列表中，您可以看到单击某些按钮时应该发生的情况，以及打开网站时应该发生的情况：

当您打开网站时，应该是这样的： “。menu-home-link，.menu-government-text，.menu-voice-text，.menu-news-text”应隐藏，“。menu-home-文本，.link-your-voice，link-nation-news，.link-government“应该是可见的。

单击菜单按钮时我想要发生的事情：

如果您点击“菜单主页链接” - ＆gt; “。menu-home-link，.menu-government-text，.menu-voice-text，.menu-news-text”应隐藏，“。menu-home-文本，.link-your-voice，link-nation-news，.link-government“应该可见。

如果您点击“。link-your-voice” - ＆gt; “。link-your-voice，.menu-government-text，.menu-home-text，.menu-news-text”应隐藏，“。menu-voice-文本，menu-home-link，link-nation-news，.link-government“应该可见。

如果您点击“。link-nation-news” - ＆gt; “。link-nation-news，.menu-government-text，.menu-home-text，.menu-voice-text”应该隐藏起来，“。菜单新闻 - 文字，菜单主页链接，链接你的声音，.link-government“应该可见。

如果您点击“。link-government” - ＆gt; “。链接政府，.menu-news-text，.menu-home-text，.menu-voice-text”应隐藏，“。菜单 - 政府 - 文本，菜单主页链接，链接你的声音，.link-nation-news“应该可见。

目前我有以下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>

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

1 个答案: