Question

正如你在jsfiddle http://jsfiddle.net/C8B8g/7/上看到的那样我有2个按钮（= 2个div）“区域”和“源”。鼠标悬停时每个div都会突出显示（蓝色背景）（感谢stackoverflow贡献者，因为我在JS中仍然非常糟糕）。

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

Answer 1

试试这个：更新： Here is working 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;

});

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

Answer 3

好的，我决定发布一个答案，因为我想解决你的代码的某些部分。

首先，您可以使用jQuery return false;函数，而不是在最后执行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>就可以实现当前的样式和功能，而不需要将它们包装在{{1}中和<div>。

例如，这里的代码相同，只有锚标记：http://jsfiddle.net/dmvcQ/7/

如果您对答案有任何疑问，请与我联系。

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>

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;

});

单击其他DIV时更改DIV颜色

5 个答案: