Изменение цвета фона на DIV - Поменяйте цвет с помощью вкладок

Question

Я пытаюсь изменить цвет фона трех разделов при нажатии. Мне удалось изменить цвет фона и содержимое div, когда он щелкнут, но не может решить, как вернуть div в исходное состояние?

Он должен функционировать как три вкладки в верхней части (один, два, три) с одним по умолчанию зеленым, когда любой из других нажат на изменения defaut, и тот, который был нажат, изменился. http://jsfiddle.net/0es6neph/

Вкладка должна быть выбрана по умолчанию.

Я иду по правильному пути об этом или это беспорядочное решение простой проблемы?

<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

Это действительно грязно ... Я обнаружил некоторые ненужные маршруты в вашем коде:

1) Используйте идентификаторы, начинающиеся с буквы, как # tab1 и только в коем случае не чисел. 2) Не нужно инкапсулировать этот процесс в функцию. Это простая процедура, которая не должна рассматриваться как повторяющийся шаблон. 3) Не вызывайте функцию внутри атрибута href. Вместо этого используйте onclick для запуска инструкций JS click.

Используйте этот подход вместо: 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

Я думаю, вы должны дать те Div класс для, например: .bg, а затем в вы должны изменить в JQuery цвет фона, как here.

Answer 3

Я бы рекомендовал использовать класс для изменения состояния ваших ссылок.

Добавить это в CSS

.active{ 
    background-color: #008800; 
} 

Измените функцию щелчка на этой

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

Проверьте это здесь, в JSFiddle

Answer 4

Использование JQuery, как вы уже загрузить его. И постарайтесь не сворачивать код.

var openTab = null; 
 

 
function swapin(newTab){ 
 
    if(openTab != null){ 
 
     openTab.css('background-color','#7D135A'); 
 
     $(openTab.data('tab-element')).css('display',"none"); 
 
    } 
 
\t 
 
\t newTab.css('background-color','#008000'); 
 
    $(newTab.data('tab-element')).css('display',"block"); 
 
\t 
 
\t 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; 
 
\t 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>