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

我试图在单击三个div时更改它们的背景色。我已经设法改变了背景颜色和内容的div时，它被点击，但无法解决如何返回到原始状态的div

它应该作为顶部的三个选项卡（一个、两个、三个），其中一个默认为绿色，当单击任何其他选项卡时，删除更改和单击的更改

默认情况下，应选择选项卡1

我在这方面走的是正确的道路，还是一个简单问题的混乱解决方案

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

var currentDiv=null；
函数swapin（divName）{
如果（currentDiv！=null）{
document.getElementById（currentDiv.style.display=“无”；
}
if（document.getElementById！=“contain”）{
document.getElementById（'1'）.style.display=“无”；
}
currentDiv=divName；
document.getElementById（currentDiv.style.display=“block”；
}
window.onload=函数（）{
document.getElementById（'1'）.style.display=“block”；
}
.标签{
背景色：#7D135A；
边界半径：2×2×0；
高度：50px；
宽度：90px；
左侧填充：10px；
右边填充：10px；
垫面：5px；
垫底：0px；
颜色：#FFFFFF；
}
.包含{
宽度：500px；
高度：200px；
边界：2px；
边框样式：实心；
边框颜色：#7D135A；
}
一个内容
两个内容
三个内容
$（函数（）{
$（“.tabs”）。单击（函数（）{
$（this.css（'background-color'，'#008000'）；
});
});

我认为你应该给那些div一个类，例如：

.bg

，然后在jQuery中你应该改变背景颜色，比如这里的

，这真的很乱。。。我在您的代码中检测到一些不必要的路由：

1） 使用以字母（如#tab1）开头的ID，不要仅使用数字。 2） 无需将此过程封装在函数中。这是一个简单的过程，不需要像重复模式那样处理。 3） 不要在href属性内调用函数。改用onclick运行JS click指令

改用这种方法：

---

我建议使用类来更改链接的状态

将此添加到css中

.active{
    background-color: #008800;
}

将您的单击功能更改为此

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

---

在这里查看它，因为您已经加载了jQuery。 尽量不要把你的代码弄乱。

var openTab=null；
功能交换销（newTab）{
if（openTab！=null）{
css（'background-color'，'#7D135A'）；
$（openTab.data（'tab-element'））.css（'display'，'none'）；
}
css（'background-color'，'#008000'）；
$（newTab.data（'tab-element'））.css（'display'，'block'）；
openTab=newTab；
}
$（函数（）{
$（“.tabs.tab”）。单击（函数（）{
swapin（$（本））；
});
});
.tabs.tab{
背景色：#7D135A；
边界半径：2×2×0；
高度：50px；
宽度：90px；
左侧填充：10px；
右边填充：10px；
垫面：5px；
垫底：0px；
颜色：#FFFFFF；
光标：指针；
}
.包含{
宽度：500px；
高度：200px；
边界：1px；
边框样式：实心；
边框颜色：#7D135A；
}

一个
两个
三
一个内容
两个内容
三个内容
出于可读性原因，您应该首先将所有剩余的Vanilla转换为jQuery。。。我相信它现在正在按预期工作。。。检查一下！这正是它应该如何工作的，除了默认选中选项卡“一”（绿色）之外。这比我以前做的要简单得多。我可以问一下吗？这样我就明白了，第一个版本和第二个版本之间有什么区别？第一个看起来也很好，而且更短？谢谢第一和第二个版本是什么意思？没错，我只是想弄清楚为什么第二个更好？他们两个似乎都工作得很好…经过编辑的答案中有一些原因。。。其他原因可能是。。。您没有在代码中生成不必要的if语句。。。您正在使用jQuery（如果它正在加载到您的网站……您最好使用它）
$(".tabs").click(function () {
        $(".active").removeClass("active");
        $(this).addClass('active');
    });