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

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

答案 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;
答案 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)
答案 3 :(得分:0)
首先,你的HTML有错误。未添加<div>
元素。其次,你从来没有在开始时在所有div上调用hide(),因为没有隐藏它们。你只有fadeIn。如果所有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();
});
&#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;