顯示隱藏div取決於單擊哪個鏈接

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

將類名稱（例如，“ 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');
});

查看JSFiddle演示