javascript - 更改 DIV 上的背景颜色 - 使用选项卡交换颜色

Question

我试图在单击三个 div 时更改它们的背景颜色。我已经设法在单击时更改了 div 的背景颜色和内容，但不知道如何将 div 返回到原始状态？

它应该作为顶部的三个选项卡(一、二、三)发挥作用，其中一个默认为绿色，当单击其他任何一个时，默认值会更改，而被单击的选项卡也会更改。 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 之类的字母开头的 ID，切勿单独使用数字。2)不需要把这个过程封装在一个函数中。这是一个简单的过程，不需要像重复模式那样处理。3)不要调用href属性里面的函数。改为使用 onclick 运行 JS 点击指令。

改用这种方法:JSFIDDLE

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