更改DIV上的背景颜色-使用标签交换颜色

Question

I'm trying to change the background color of three divs when they are clicked. I have managed to change the background color and content of the div when it is clicked but can't work out how to return the div to the original state?

It should function as three tabs along the top (one,two,three) with one by default green, when any of the others are clicked the defaut changes and the one that was clicked changes. http://jsfiddle.net/0es6neph/

Tab One should be selected by default.

Am I going the right way about this or is it a messy solution to a straightforward problem ?

<script type="text/javascript">
var currentDiv = null;

function swapin(divName){
if(currentDiv != null){
document.getElementById(currentDiv).style.display = "none";

}
if(document.getElementById != 'contain'){
document.getElementById('1').style.display = "none";
}
currentDiv = divName;
document.getElementById(currentDiv).style.display = "block";
}
window.onload = function(){
document.getElementById('1').style.display = "block";
}

</script>

<style>
.tabs {
    background-color:#7D135A;
    border-radius: 2px 2px 0 0;
    height: 50px;
    width: 90px;
    padding-left:10px;
    padding-right:10px;
    padding-top:5px;
    padding-bottom:0px;
    color:#FFFFFF;
    }

 .contain {
    width:500px;
    height:200px;
    border:2px;
    border-style: solid;
    border-color: #7D135A;
    }



</style>

<a href="javascript: swapin('1');" class="tabs">One</a>&nbsp;
<a href="javascript: swapin('2');" class="tabs" >Two</a>&nbsp;
<a href="javascript: swapin('3');" class="tabs">Three</a>&nbsp;

<div id="contain" class="contain">
<div id="1" style="display: none;">
One Content
</div>
<div id="2" style="display: none;">
Two Content
</div>
<div id="3" style="display: none;">
Three Content
</div>
</div>

<script>
$(function () {
$(".tabs").click(function () {
    $(this).css('background-color', '#008000');
});
});
</script>

Answer 1

That's really messy ... I detected some unnecessary routes in your code:

1) Use ids starting with a letter like #tab1 and never numbers alone. 2) No need to encapsulate this process in a function. This is a straightforward procedure that doesn't need to be addressed like a repetitive pattern. 3) Do not call the function inside the href attribute. Use onclick to run JS click instructions instead.

Use this approach instead: JSFIDDLE

$(function () {
    $(".tab").click(function () {
        var tab = $(this),
            dataTab = tab.attr('data-tab');
        tab.addClass('active').siblings('.tab').removeClass('active');
        $('#'+dataTab).show().siblings().hide();
    });
});

Answer 2

I would recommend using a class for changing the state of your links.

Add this in css

.active{
    background-color: #008800;
}

Change your click function to this

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

Check it out here in JSFiddle

Answer 3

我想你应该给那些div的一类如： .bg然后你应该在jQuery的改变背景颜色一样here 。

Answer 4

Use jQuery as you have already load it. And try not to mesh up your code.

 var openTab = null; function swapin(newTab){ if(openTab != null){ openTab.css('background-color','#7D135A'); $(openTab.data('tab-element')).css('display',"none"); } newTab.css('background-color','#008000'); $(newTab.data('tab-element')).css('display',"block"); openTab = newTab; } $(function () { $(".tabs .tab").click(function () { swapin($(this)); }); }); 

 .tabs .tab{ background-color: #7D135A; border-radius: 2px 2px 0 0; height: 50px; width: 90px; padding-left: 10px; padding-right: 10px; padding-top: 5px; padding-bottom: 0px; color: #FFFFFF; cursor: pointer; } .contain { width: 500px; height: 200px; border: 1px; border-style: solid; border-color: #7D135A; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="tabs"> <a click="swapin()" class="tab" data-tab-element="#1">One</a> <a click="swapin()" class="tab" data-tab-element="#2">Two</a> <a click="swapin()" class="tab" data-tab-element="#3">Three</a> </div> <div id="contain" class="contain"> <div id="1" style="display: none;"> One Content </div> <div id="2" style="display: none;"> Two Content </div> <div id="3" style="display: none;"> Three Content </div> </div>