CODEWITHSUNDEEP
javascriptjquerycss
Rick Evans
Rick Evans

Reputation: 125

Changing background color on DIV - Swap color with tabs

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>

Upvotes: 0

Views: 621

Answers (4)

henser
henser

Reputation: 3327

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();
    });
});

Upvotes: 1

GramThanos
GramThanos

Reputation: 3622

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>

Upvotes: 0

Johan Karlsson
Johan Karlsson

Reputation: 6476

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

Upvotes: 1

Florin Pop
Florin Pop

Reputation: 5135

I think you should give those div a class for eg: .bg and then in you should change in jQuery the background color like here.

Upvotes: 0

Related Questions