隐藏/显示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> 

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个问题

1. 您的<li> <div>标记未正确关闭
2. 最初，您并没有隐藏div，因此一旦单击它就可以淡入。

这是您的代码的小提琴https://jsfiddle.net/2tkfq87o/

Answer 4

第一件事是您的html出现错误。 在<div>上未添加元素。 其次，您一开始就从未在所有div上调用hide（），因为它们都没有被隐藏。 你只有淡入淡出。 如果所有div都是可见的，则没有必要调用fadeIn。

所以先藏起来。 然后在单击时调用fadeIn，同时隐藏已经存在的div。

 $(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(); }); 

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