Question

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

＆＃13;

tabindex

＆＃13;

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

＆＃13;

Answer 1

问题是你有$（＆＃39; a.button＆＃39;）而不是$（＆＃39; a.common＆＃39;）你还想要一个css来隐藏div的开头。而且当你淡入一个新的div时，你需要隐藏当前的那个。

＆＃13;

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

＆＃13;

#divs div {display:none}

＆＃13;

<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>

＆＃13;

Answer 2

问题在于你的jQuery选择器：

//This ona means that you  are searching for tag a with class button
$('a.abutton').click(function() {})

//You should use:
$('a.common').click(function() {})

// Because your a tags has class 'common'

Answer 3

有2个问题

<div>

<li>

最初你没有隐藏你的div，所以一旦你点击它就可以淡入。

以下是您的代码

Answer 4

首先，你的HTML有错误。未添加<div>元素。其次，你从来没有在开始时在所有div上调用hide（），因为没有隐藏它们。你只有fadeIn。如果所有div都可见，则调用fadeIn是没有意义的。

首先隐藏它们。然后在点击时调用fadeIn，同时隐藏已存在的div。

＆＃13;

$(document).ready(function() {

  $('a.common').click(function() {
    hideAllDivs();
    var id = $(this).attr('href');
    $(id).fadeIn('slow', function() {
      // Animation complete
    });
  });

  var hideAllDivs = function() {
    $('#div1').hide();
    $('#div2').hide();
    $('#div3').hide();
  }
  hideAllDivs();
  $('#div1').show();

});

＆＃13;

<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="div1">TEST ONE</div>

    <div id="div2">TEST TWO</div>

    <div id="div3">TEST THREE</div>
  </div>
</div>

＆＃13;

隐藏/显示div不起作用

4 个答案: