Question

我点击时尝试更改三个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>

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();
    });
});

Answer 2

我建议使用课程来更改链接的状态。

在css中添加此内容

.active{
    background-color: #008800;
}

将您的点击功能更改为此

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

请在JSFiddle

中查看

Answer 3

我认为你应该给这些div一个例如：.bg的类，然后你应该在jQuery中改变像here这样的背景颜色。

Answer 4

使用jQuery已经加载了它。并尽量不要对代码进行网格化。

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

在DIV上更改背景颜色 - 使用制表符交换颜色

4 个答案: