使用背景颜色更改Clicked Hover div

John 发表于 Dev

约翰

我已经编码了以下悬停链接，这些链接使用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>

阿尔比

请看这个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!");
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。