当另一个DIV被点击时更改DIV颜色

Question

正如您在 jsfiddle 中所看到的一样 http://jsfiddle.net/C8B8g/7/ 我有两个按钮(= 2 个 div) “地区”和“来源”。每个 div 在鼠标悬停时都会被突出显示 (蓝色背景)，感谢 stackoverflow 的贡献者，因为我还不太擅长 JS。

我注意到用户实际上并没有意识到这些是按钮，所以我想要做的是让包含文本“我们的地区”的第一个 DIV 默认带有蓝色背景，并且只有当另一个包含文本“我们的来源”的 div 被单击时才恢复白色背景（在这种情况下，“我们的来源”背景将变为蓝色）。已经使用 CSS 中的“current”进行了一些测试，但没有成功...

- Greg

Answer 1

尝试这个： 更新： 这里是可用的 jsFiddle。

$('.activity-title a:first').css({'background-color':'#f00','color':'#fff'});
//for setting first button highlighted by default,
//don't forgot to define document.ready before this

$('.activity-title a').click(function() {
    var region = $(this).attr('data-region');

    $('.activity-title a').css({'background-color':'#fff','color':'#467FD9'});
    $(this).css({'background-color':'#f00','color':'#fff'});

    $('.textzone:visible').stop().fadeOut(500, function () {
    //don't forgot to add stop() for preventing repeat click conflict
        $('#' + region).fadeIn(500);
    });

    return false;

});​

- Barlas Apaydin

---

谢谢 - 它很好用！有没有办法默认高亮显示第一个按钮？（因为右侧的文本区域可见，这将帮助人们理解每个按钮与一个文本区域相关联） - Greg

@Greg，我更新了我的答案，你可以将这些CSS值分配给类或ID，并使用removeClass / addClass方法，但是你问如何使用jQuery更改CSS，所以我用这种方式回答了。 - Barlas Apaydin

Answer 2

为选定的 div 添加样式。

.source-selected {
    background-color:#00F;
}

将此类添加到您的默认div中。

将以下行添加到您的单击处理程序中（已更新）

if(!$(this).closest('.source-title-box').hasClass('source-selected'))
{
    $('.source-title-box').toggleClass('source-selected');
}

请尝试使用更新的代码编辑器:

http://jsfiddle.net/dmvcQ/1

- Michal Klouda

---

我更喜欢你的方法，因为它避免了内联CSS。但是这将交替应用类，无论单击哪个链接都没有关系。您需要在添加的那一行之前再添加另一行，类似于这样：$('.source-selected').toggleClass('source-selected'); - Jeemusu

你可能还想检查一下最接近的('.source-title-box')，因为你的代码选择了所有这些元素。 - Jeemusu

你是正确的，我试图变得更快 ;) 我已经修复了代码并根据您的评论更新了答案。谢谢。 - Michal Klouda

Answer 3

好的，我决定回答一下，因为你的代码有些部分我想要解释一下。

首先，不要在最后使用 return false;，你可以使用 jQuery 的 event.preventDefault(); 函数。最终结果基本相同，但是这样做我们可以使用 jQuery 在运行其他代码之前就告诉锚点什么都不用做。

我的更新后的 Javascript 代码：

$('.source-title-box a').click(function(event) {

    // Stop the default anchor behaviour
    event.preventDefault(); 

    // Lets check if the clicked link is already active
    // And if it is active, don't let them click it!
    if($(this).closest('div').hasClass('active')) {
        return false;   
    }

    // Now lets remove any active classes that exist
    $('.active').toggleClass('active');

    // And apply an active class to the clicked buttons
    // parent div
    $(this).closest('div').toggleClass('active');

    var region = $(this).attr('data-region');

    $('.textzone:visible').fadeOut(500, function () {
        $('#' + region).fadeIn(500);
    });
});​

我添加的CSS：

.active {
    background-color:#467FD9;
    color:#fff;   

}
.active a {
    cursor:default;  /* Don't show the hand cursor */
    color:#fff;  
}

一个工作示例：

http://jsfiddle.net/dmvcQ/3/

我不确定当前的HTML标记是否有其他用途，但是只需使用<a href="#" data-region="source-region">Our region</a>即可实现当前的样式和功能，无需将其包装在<div>和<span>中。

例如，这里是相同的代码，仅使用锚点标记：http://jsfiddle.net/dmvcQ/7/ 如果您对答案有任何疑问，请告诉我。

- Jeemusu

---

谢谢你的回答Jeemusu！由于某种原因，在实际环境中（点击此处http://goo.gl/fOHGN的“源”页面），与jsfiddle上不同，第一个“按钮”不会自动高亮。你知道是为什么吗？谢谢 - Greg

你是否将活动类添加到默认选中的HTML元素中？请查看我的JS Fiddle以了解我是如何设置的。 - Jeemusu

哎呀，我错过了那个 - 现在没事了，非常感谢你的帮助！ - Greg

Answer 4

try with this exemple:
<div id="target">
 Test1
</div>
<div id="other">
  Test2
</div>

<script>
$("#target").click(function() {
  $('#target').css({'background':'blue'});
 $('#other').css({'background':'white'});
});

$("#other").click(function() {
  $('#other').css({'background':'blue'});
  $('#target').css({'background':'white'});
});
</script>

- bouazizi

Answer 5

或者你可以主要使用jQuery来完成

一个可行的示例：

http://jsfiddle.net/razmig/GhbjS/

$('.activity-title a:first').css({
    "background-color": "#467FD9",
    "color": "#fff"
});


$('.activity-title a').mouseover(function() {
    $('.activity-title a').css({
        "background-color": "#fff",
        "color": "#467FD9"
    });
    $(this).css({
        "background-color": "#467FD9",
        "color": "#fff"
    });

});

$('.activity-title a').click(function() {
    var region = $(this).attr('data-region');

    $('.textzone:visible').fadeOut(2000, function() {
        $('#' + region).fadeIn(2000);
    });

    return false;

});

- Razmig

---

感谢您的回答和工作示例。我注意到您更改了href =“＃”的html。不幸的是，在我的情况下（每个部分一个div的单页布局），这并不起作用（单击按钮会使页面向上滚动到顶部）。 - Greg

只需添加 href="javascript:void(0)" 或在 jQuery 中使用 event.preventDefault()。 - Razmig