Change Clicked Hover div with background colours

Question

I have coded the following hover links that loads content using jQuery into a div. It hovers nicely. As an example i have 4 links (1-4).

When I click a link and once it has loaded, I would like that to become like the way I have styled Link 3. Then when another link is clicked, it needs to re-activate the previous link.

JsFiddle

Any idea how I can go about doing this?

Thanks.

<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

Please look at this JsFiddle

I added classes:

.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;
}

So now your HTML looks like this:

<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>

and jQuery:

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

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

Answer 3

Use like this

$("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

The example you gave has much room to improve. I suggest to use an unordered list at the first place, with css-defined base and hover background. For this there is no need for 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');
    });
});

Hope, it helps you out.