Question

我有四个链接，我需要显示隐藏相应的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;
}

Answer 1

工作演示：http://jsfiddle.net/9ctfh6jc/或此：http://jsfiddle.net/vm7oLjbd/

您需要的API preventDefault()，以阻止a代码默认操作。
http://api.jquery.com/event.preventdefault/

试试这个：

$("#category").click(function(e){
    e.preventDefault();
  $("#one").fadeToggle();
});

$("#style").click(function(e){
    e.preventDefault();
  $("#two").fadeToggle();
});
$("#style").click(function(e){
    e.preventDefault();
  $("#three").fadeToggle();
});

Answer 2

将类名称（＆＃34; fading＆＃34;例如）添加到您希望具有此行为的每个链接，并添加应作为属性切换的相关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');
});

<强> Check JSFiddle Demo

根据点击的链接显示隐藏div

2 个答案: