在DIV上更改背景颜色 - 用选项卡交换颜色

我试图在点击它们时更改三个div的背景颜色。当单击它时，我已设法更改div的背景颜色和内容，但无法确定如何将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>

来源

2014-09-21 Rick Evans

你应该将所有剩余的香草jQuery的可读性原因开始。 – 2014-09-21 17:43:09

这是真的很乱......我发现了一些不必要的航线代码：

1）使用开始喜欢＃TAB1和单独从未号的信标识。 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(); 
    }); 
});

来源

2014-09-21 17:42:58 henser

编辑小提琴......我相信它现在按预期工作......检查它！ – henser 2014-09-21 17:48:51

这就是它应该如何工作，除了选项卡'一个'是默认选择（绿色）。这比我做这件事简单得多。我可以问，所以我理解它，第一个和第二个版本有什么区别？第一个似乎也工作得很好，而且更短？谢谢！ – 2014-09-21 17:52:31

第一个和第二个版本是什么意思？ – henser 2014-09-21 17:56:21

我觉得你应该给那些div的一类如：.bg然后你应该在jQuery的改变背景颜色一样here。

来源

2014-09-21 17:37:33

我会建议使用一类用于更改链接的状态。

在CSS

.active{ 
    background-color: #008800; 
}

添加这个

您点击功能更改为这个

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

看看这里的JSFiddle

来源

2014-09-21 17:43:29

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

来源

2014-09-21 17:53:15 GramThanos

在DIV上更改背景颜色 - 用选项卡交换颜色

回答

相关问题