Question

我编写了以下悬停链接，使用jQuery将内容加载到div中。它很好地徘徊。作为一个例子，我有4个链接（1-4）。

当我点击一个链接并且一旦加载后，我希望它变得像我设置链接3的样式。然后当点击另一个链接时，它需要重新激活上一个链接。

知道如何做到这一点吗？

感谢。

<script>
  function bgColorChange(obj, color){
    obj.style.backgroundColor = color;
  }

  function loadContent(page){
    $("#contentPlaceHolder").html("Hello, this is <b>" + page + "</b>!");
  }
</script>


<div onclick="loadContent('link1');" style="border-color: #fff; border-style: solid; border-width: 0 0 1px 0; background-color:#666666; width:200px; line-height:42px; padding-left:10px; color:#fff; cursor:pointer;" onmouseover="bgColorChange(this, '#CCCCCC'); this.style.color='#000';" onmouseout="bgColorChange(this, '#666666'); this.style.color='#fff';">Link 1</div>
<div onclick="loadContent('link2');" style="border-color: #fff; border-style: solid; border-width: 0 0 1px 0; background-color:#666666; width:200px; line-height:42px; padding-left:10px; color:#fff; cursor:pointer;" onmouseover="bgColorChange(this, '#CCCCCC'); this.style.color='#000';" onmouseout="bgColorChange(this, '#666666'); this.style.color='#fff';">Link 2</div>      
<div style="border-color: #fff; border-style: solid; border-width: 0 0 1px 0; background-color:#CCCCCC; width:200px; line-height:42px; padding-left:10px; color:#000;">Link 3</div>   
<div onclick="loadContent('link4');" style="border-color: #fff; border-style: solid; border-width: 0 0 1px 0; background-color:#666666; width:200px; line-height:42px; padding-left:10px; color:#fff; cursor:pointer;" onmouseover="bgColorChange(this, '#CCCCCC'); this.style.color='#000';" onmouseout="bgColorChange(this, '#666666'); this.style.color='#fff';">Link 4</div>
<div id="contentPlaceHolder" style="float:right;"></div>

Answer 1

您可以定义一个单击/激活的类并为其编写所需的css，并使用javascript在点击事件中添加或删除该类！

Answer 2

请查看此JsFiddle

我添加了课程：

.link{
    border-color: #fff;
    border-style: solid;
    border-width: 0 0 1px 0;
    background-color:#666666;
    width:200px;
    line-height:42px;
    padding-left:10px;
    color:#fff;
    cursor:pointer;
}

.link:hover{
    background:#ccc !important;
    color:#000 !important;
}

.link.active{
    border-color: #fff;
    border-style: solid;
    border-width: 0 0 1px 0;
    background-color:#CCCCCC !important;
    width:200px;
    line-height:42px;
    padding-left:10px;
    color:#000;
}

#contentPlaceHolder{
  float:right;
}

所以现在你的HTML看起来像这样：

<div class="link" >Link 1</div>

<div class="link">Link 2</div>

<div class='link active'>Link 3</div>

<div class="link">Link 4</div>

<div id="contentPlaceHolder"></div>

和jQuery：

$('.link').click(function(e){
    $('.link').removeClass('active');
    $(this).addClass('active');

    $('#contentPlaceHolder').html("This is " + $(this).html() + " page!");
});

Answer 3

像这样使用

$("div").click(function(){
 $(".active").removeClass("active");
$(this).addClass("active");
});

<强> CSS

    div
{
    border-color: #fff; 
    border-style: solid;
    border-width: 0 0 1px 0; 
    background-color:#CCCCCC;
    width:200px;
    line-height:42px; 
    padding-left:10px;
    color:#000;
}
div:hover
{
    background-color:red;

}
.active
{
    background-color:blue;

}

Demo

Answer 4

您提供的示例有很大的提升空间。我建议首先使用无序列表，使用css定义的基数和悬停背景。为此，不需要JS。

Quicky：

<强> HTML：

<ul id="main_menu">
    <li><a href="1">Item 1</a></li>
    <li><a href="1">Item 2</a></li>
    <li><a href="1">Item 3</a></li>
    <li><a href="1">Item 4</a></li>
</ul>

<强>的CSS：

ul#main_menu {
    list-style: none;
}

ul#main_menu li a {
    display: block;
    width: 200px;
    background-color: #777;
    margin: 3px;
    padding: 3px;
}

ul#main_menu li a:hover {
    background-color: #ccc;
}

ul#main_menu li a.activated {
    background-color: #aaa;
}

<强> jquery的：

$(document).ready(function(){
    $('ul#main_menu li a').click(function(e) {
        e.preventDefault();
        $('ul#main_menu li a').removeClass('activated');
        $(this).addClass('activated');
    });
});

希望，它会帮助你。

使用背景颜色更改Clicked Hover div

4 个答案: