[英]Show hide div's depending on which link is clicked
我有四个链接,我需要根据单击哪个显示相应的div隐藏。 同样,如果单击相同的链接,则应隐藏其对应的链接。 所有淡入淡出。
小提琴: http : //jsfiddle.net/zangief007/mnotd7Lh/
<ul>
<li><a id="category" href="">Catergory</a></li>
<li><a id="style" href="">styles</a></li>
<li><a id="brand" href="">brand</a></li>
</ul>
<div id="one">This is my category</div>
<div id="two">This is styles</div>
<div id="three">This is main brands</div>
JS:
$("#category").click(function(){
$("#one").fadeToggle();
});
$("#style").click(function(){
$("#two").fadeToggle();
});
$("#style").click(function(){
$("#three").fadeToggle();
});
CSS:
#two, #three, #four{
display:none;
}
工作演示: http : //jsfiddle.net/9ctfh6jc/或以下示例: http : //jsfiddle.net/vm7oLjbd/
preventDefault()
来防止a
标签默认动作。 尝试这个:
$("#category").click(function(e){
e.preventDefault();
$("#one").fadeToggle();
});
$("#style").click(function(e){
e.preventDefault();
$("#two").fadeToggle();
});
$("#style").click(function(e){
e.preventDefault();
$("#three").fadeToggle();
});
将类名称(例如,“ fading”)添加到您希望具有此行为的每个链接中,并添加应该作为属性切换的相关div( relDiv="one"
)。 还向所有相关的div添加一个类(例如, class="relDiv"
)。
因此,您的HTML必须如下所示:
<ul>
<li><a class="fading" relDiv="one" href="">Catergory</a></li>
<li><a class="fading" relDiv="two" href="">styles</a></li>
<li><a class="fading" relDiv="three" href="">brand</a></li>
</ul>
<div id="one" class="relDiv">This is my category</div>
<div id="two" class="relDiv">This is styles</div>
<div id="three" class="relDiv">This is main brands</div>
并使用这几行JQuery行作为您想要的菜单:
var currentDiv = 'one';
$(".fading").click(function(e){
e.preventDefault();
$this = $(this);
if (currentDiv != $this.attr('relDiv')){
$("#" + currentDiv).fadeOut( "slow", function() {
$("#" + $this.attr('relDiv')).fadeIn();
});
}
currentDiv = $(this).attr('relDiv');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.