onClick div在单击另一个时更改颜色并返回颜色

Question

我想指出我点击哪个div以防止混淆，因为我网站上出现的弹出菜单将是相同的不同链接但相同的按钮。现在我的问题是，我无法弄清楚我是如何设法做到这一点已经坚持了很长一段时间了。我的网站是在Wordpress的信息。文本的颜色并不重要。 代码确实有效但我希望当我点击“多汁植物”时颜色会发生变化，当我点击“叶子植物”时，颜色会发生变化，“多汁植物”会恢复正常。随着颜色的变化，我的意思是已经呈现的颜色。 我的代码：

HTML：

<div id="clickOne" class="clickDesign">
<h2 class="fs20 nobold">Leafy Plants</h2>
</div>
<div  id="clickTwo" class="clickDesign">
<h2 class="fs20 nobold">Juicy Plants</h2>
</div>
</div>
<div id="leafyPlants">
Leafy Test
</div>
<div id="juicyPlants">
Juicy Test
</div>

CSS：

   #leafyPlants{
        display:none;
        position:absolute;
        top:50px;
    cursor:pointer;
    }

#juicyPlants{
    display:none;
    position:absolute;
    top:50px;
    cursor:pointer;
}

h2 {
    float:left;
    display:block;
    height:40px;
    width:150px;
    cursor:pointer;
}

jQuery的：

  $("#clickOne").on('click', function() {
   $("#leafyPlants").fadeIn();
   $("#juicyPlants").fadeOut();
});
$("#clickTwo").on('click', function() {
   $("#leafyPlants").fadeOut();
   $("#juicyPlants").fadeIn();
})

Answer 1

最好更改课程并使用样式：

jsfiddle：http://jsfiddle.net/TrueBlueAussie/Pcn5a/2/#update

$(function () {
    $("#clickOne").on('click', function () {
        $('.clickDesign').removeClass("active");
        $(this).addClass("active");
        $("#leafyPlants").fadeIn();
        $("#juicyPlants").fadeOut();
    });
    $("#clickTwo").on('click', function () {
        $('.clickDesign').removeClass("active");
        $(this).addClass("active");
        $("#leafyPlants").fadeOut();
        $("#juicyPlants").fadeIn();
    })
});

in style add：

.active{
    color: green;
}

最好对任何菜单系统进行数据驱动并减少代码：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/Pcn5a/3/

JQuery的：

$(function () {
    $('.clickDesign').on('click', function () {
        var $this = $(this);
        $('.clickDesign').removeClass("active");
        $this.addClass("active");
        // Use the id in the data-target attribute
        $target = $($this.data('target'));
        $(".target").not($target).fadeOut();
        $target.fadeIn();
    });
});

Html（具有数据目标属性）

<div>
    <div id="clickOne" class="clickDesign" data-target="#leafyPlants">
         <h2 class="fs20 nobold">Leafy Plants</h2>

    </div>
    <div id="clickTwo" class="clickDesign" data-target="#juicyPlants">
         <h2 class="fs20 nobold">Juicy Plants</h2>

    </div>
</div>
<div id="leafyPlants" class="target">Leafy Test</div>
<div id="juicyPlants" class="target">Juicy Test</div>