5

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

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

4

5 回答 5

6

试试这个：更新： 这里正在工作 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;

});​
于 2012-08-15T08:58:44.730 回答
5

为选定的 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

于 2012-08-15T09:04:19.537 回答
3

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

首先return false;，你可以使用 jQueryevent.preventDefault();函数，而不是最后做 a。最终结果基本相同，但是这样做我们可以使用 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 来实现，<a href="#" data-region="source-region">Our region</a>您不需要将它们包装在 a<div>和 a<span>中。

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

如果您对答案有任何疑问，请告诉我。

于 2012-08-15T09:43:29.557 回答
1 
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>
于 2012-08-15T09:00:35.933 回答
1

或者你可以主要做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;

});
于 2012-08-15T09:51:07.170 回答