0

我正在为一个网站编写一些代码，该网站使用 4 个列表项在页面的不同位置显示/隐藏 4 个不同的 div。

这是我正在做的一个粗略的例子：

<ul>
    <li id="first">One</li>
    <li id="second">Two</li>
    <li id="third">Three</li>
    <li id="fourth">Four</li>
</ul>

<div id="one">This is the first div</div>
<div id="two">This is the second div</div>
<div id="three">This is the third div</div>
<div id="four">This is the four div</div>

而且我正在编写一些丑陋的 JS 代码，而对于我的生活，我根本不记得/弄清楚如何简化它。

$("#first").click(function() {
    $("#one").fadeIn();
    $("#two, #three, #four").fadeOut();
});
$("#second").click(function() {
    $("#two").fadeIn();
    $("#one, #three, #four").fadeOut();
});
$("#third").click(function() {
    $("#three").fadeIn();
    $("#two, #one, #four").fadeOut();
});
$("#fourth").click(function() {
    $("#four").fadeIn();
    $("#two, #three, #one").fadeOut();
});​

这可以满足我的需要，但我知道必须有一种更简单的方法。这是一个工作的 JSFiddle - http://jsfiddle.net/claycauley/FBrx5/

如果有人可以帮助我理解为什么/如何简化它，那也很棒，因为我正在努力学习但被难住了。

4

3 回答 3

2

尝试：

$("li").click(function() {
    $("div:visible").fadeOut();
    $("div").eq($(this).index()).fadeIn();
});​

http://jsfiddle.net/FBrx5/1/

于 2012-08-11T03:07:48.487 回答
1

在@Petah 的帮助下，我想出了这个：

$("li").click(function() {
    if ($("div").eq($(this).index()).is(":visible")) {
        return false;
    }
    else {
        $("div:visible").fadeOut();
        $("div").eq($(this).index()).fadeIn();
    }
        return false;
});​

他的解决方案的唯一问题是它仍然在 div 上激活，即使它已经可见。它会淡出它，然后再重新出现。这样我就可以阻止这种情况的发生。

于 2012-08-11T03:32:37.640 回答
0

怎么样：

<ul id="linky">
    <li id="first">One</li>
    <li id="second">Two</li>
    <li id="third">Three</li>
    <li id="fourth">Four</li>
</ul>

<div class="first">This is the first div</div>
<div class="second">This is the second div</div>
<div class="third">This is the third div</div>
<div class="fourth">This is the four div</div>

$("#linky").on("click", "li", function(e) {
    $("div:visible").fadeOut();
    $("." + e.target.id).fadeIn();
});

http://jsfiddle.net/FBrx5/4/

于 2012-08-11T03:11:10.077 回答