Javascript 显示隐藏div'；s取决于单击的链接

我有四个链接，我需要显示隐藏在那里相应的div取决于其中一个点击。此外，如果单击相同的链接，则应隐藏其相应的链接。一切都会慢慢消失

小提琴：

CSS:

工作演示：或此：

• 您需要的API是

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

向您希望具有此行为的每个链接添加一个类名（“淡入”例如），并添加应作为属性切换的相关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>

---

哟++1对你来说，小记录我想也要强调使用

preventDefault

：）

。很好地添加了

relDiv

属性和淡入淡出类以获得更简单的代码。使用

与数据相关的el

元素来遵守标准并使页面仍然有效，不是更好吗？事实上，在这种情况下，他/她根本不能使用标记，可以使用

标记并设置

光标：指针

样式，我们可以删除链接和

e.preventDefault（）。但我不这么做，因为我认为他/她可能有理由使用链接。虽然我很感激你回答突出显示
preventDefault
@Moshtaf，但是应该有链接，这样页面在没有JavaScript的情况下仍然可以工作。我认为OP为了简单而忽略了它们这很好，但一次只能打开一个div。他们还需要一个自动关闭选项。我经常看到人们错误地调用
stopEvent
，因为
preventDefault
可以减少副作用。@JuanMendes渐进式学习我认为
：）
完全同意你的观点！关闭，唯一的问题是它不会在单击新div后关闭另一个div？@Steve->lil verbose这里：但我猜上面的帖子有一个
类
示例，它的版本不太详细
：）
，但是这个演示可能会满足您的需要：
#two, #three, #four{
    display:none;
}

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

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

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

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');
});