隐藏/显示div不起作用

时间:2016-01-26 08:06:00

标签: javascript jquery css html5

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



tabindex

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




4 个答案:

答案 0 :(得分:4)

问题是你有$(' a.button')而不是$(' a.common') 你还想要一个css来隐藏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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

问题在于你的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'

答案 2 :(得分:0)

有2个问题

  1. <div>
  2. 未正确关闭<li>代码
  3. 最初你没有隐藏你的div,所以一旦你点击它就可以淡入。
  4. 以下是您的代码enter image description here

    的小提琴

答案 3 :(得分:0)

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

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

&#13;
&#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;
&#13;
&#13;