javascript - 隐藏/显示 div 不起作用

Question

注意已经发布的问题并不能解决我的问题。以上是我的侧面菜单栏的显示，我希望当用户单击链接时，其内容显示在同一页面上，而其他 div 内容被隐藏。我尝试了下面的代码，但它们似乎不起作用。

 $('a.common').click(function() {
   var id = $(this).attr('href');
   $(id).fadeIn('slow', function() {
     // Animation complete
   });
 });

<div id="container">

  <div id="canvas">

    <div id="nav">
      <h2 id="title">
		<i class="fa fa-sitemap">
   			</i> MENU</h2>
      <ul id="toggle">

        <li>
          <div class="active border">
            <a href="#div1" class="common">HOME</a>
          </div>
        </li>

        <li>
          <div>
            <span class="menu-icons  fa fa-user"></span> 
            <a href="#div2" class="common">ABOUT US</a>
          </div>
        </li>

        <li>
          <div>

            <a href="#div3" class="common">PORTFOLIO</a>
        </li>

        <li>
          <div>
            <a href="#">CONTACT</a>
          </div>
        </li>
      </ul>
      </div>
      <a href="#" class="toggle-nav" id="bars"><i class="fa fa-bars"></i></a>


      <div id="div1">TEST ONE</div>

      <div id="div2">TEST TWO</div>

      <div id="div3">TEST THREE</div>
    </div>
  </div>

Answer 1

问题是你有 $('a.button') 而不是 $('a.common') 您还需要一个 css 来隐藏开头的 div。 而且当您淡入新的 div 时，您需要隐藏当前的 div。

$('a.common').click(function() {
   var id = $(this).attr('href');
   $("#divs div").hide();
   $(id).fadeIn('slow', function() {
     // Animation complete
   });
 });

#divs div {display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

  <div id="canvas">

    <div id="nav">
      <h2 id="title">
		<i class="fa fa-sitemap">
   			</i> MENU</h2>
      <ul id="toggle">

        <li>
          <div class="active border">
            <a href="#div1" class="common">HOME</a>
          </div>
        </li>

        <li>
          <div>
            <span class="menu-icons  fa fa-user"></span> 
            <a href="#div2" class="common">ABOUT US</a>
          </div>
        </li>

        <li>
          <div>

            <a href="#div3" class="common">PORTFOLIO</a>
          </div>
        </li>

        <li>
          <div>
            <a href="#">CONTACT</a>
          </div>
        </li>
      </ul>
      </div>
      <a href="#" class="toggle-nav" id="bars"><i class="fa fa-bars"></i></a>


      <div id="divs">
        <div id="div1">TEST ONE</div>

        <div id="div2">TEST TWO</div>

        <div id="div3">TEST THREE</div>
      </div>
    </div>
  </div>