在DIV上更改背景颜色 - 使用标签交换颜色 [英] Changing background color on DIV - Swap color with tabs

问题描述

我尝试在点击三个div时更改其背景颜色。我已经设法改变div的背景颜色和内容，当它被点击，但不能解决如何将div返回到原始状态？

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?

作为顶部的三个选项卡（一个，两个，三个），其中一个默认为绿色，当任何其他人点击defaut更改和点击的更改。 http://jsfiddle.net/0es6neph/

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/

我是否正确地解决这个问题，或者是一个简单的问题的解决方案？

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>

推荐答案

这太麻烦了...我检测到一些不必要的路由在您的代码中：

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

1）使用以＃tab1之类的字母开头的id，而不是单独的数字。
2）不需要在函数中封装这个过程。这是一个不需要像重复模式那样被解决的简单过程。
3）不要调用href属性中的函数。使用onclick运行JS点击说明。

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.

使用此方法： JSFIDDLE

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

这篇关于在DIV上更改背景颜色 - 使用标签交换颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！