javascript 更改 Div 样式 onclick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6655423/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change Div style onclick
提问by Mike
I have 2 tabs at the top of a page. When one tab is clicked, I would like that tab to have an "active" class and the other tab to have an "inactive" class so that the user can see what tab is currently selected. How can I go about doing this with javascript/css?
我在页面顶部有 2 个标签。单击一个选项卡时，我希望该选项卡具有“活动”类，而另一个选项卡具有“非活动”类，以便用户可以查看当前选择的选项卡。我怎样才能用 javascript/css 来做这件事？
<div class="tabActive">
Option 1
</div>
<div id="tabInactive">
Option 2
</div>
采纳答案by Sotiris
another non-jQuery solution could be the following that works with more than two div:
另一个非 jQuery 解决方案可能是以下适用于两个以上的解决方案div：
function changeClass(elClass) {
var divsLenght = document.getElementsByTagName("div").length;
for (var i = 0; i < divsLenght; i++) {
document.getElementsByTagName("div")[i].className = "tabInactive";
}
elClass.className = "tabActive";
}
Demo:http://jsbin.com/opetec/2
演示：http : //jsbin.com/opetec/2
回答by Thomas Shields
Give your tabs a class of "tab"... HTML:
给你的标签一个“标签”类...... HTML：
<div class="tab">
...
</div>
<div class="tab">
...
</div>
JS:
JS：
function getByClass(_class, elem) {
var i, result = [], elems = document.getElementsByTagName("div"); //get the elements
for (i = 0; i < elems.length; i++) {
if (elems[i].className.indexOf(_class) !== -1) { //if the elements have the class passed in, add it to the result array
result.push(elems[i]);
}
}
return result;
}
var i, tabs = getByClass("tab", "div"); //get all divs with class tab
for (i = 0; i < tabs.length; i++) { //for each tab...
tabs[i].onclick = function() { //wire up it's click event...
//to clear the other tabs...
var j;
for(j=0; j < tabs.length; j++) {
tabs[j].className = tabs[j].className.replace(" active", "");
}
this.className += " active"; //where active is a class predefined in the CSS
};
}
回答by Patricia
here's a solution that doesn't use any jQuery! it does assume there is only 2 tabs thought.
这是一个不使用任何 jQuery 的解决方案！它确实假设只有 2 个标签。
<div id="tab1" onclick="setToActive(this, 'tab2');">
Option 1
</div>
<div id="tab2" onclick="setToActive(this, 'tab1');">
Option 2
</div>
function setToActive(me, otherId){
me.className='active';
document.getElementById(otherId).className='inactive';
}
回答by switz
<div class="tabInactive" onclick="this.classname='tabActive'"></div>
if using jquery:
如果使用 jquery：
$("div.tabInactive").click(function() {
$("div.tabInactive").removeClass("tabActive");
$(this).addClass("tabActive");
});
回答by brenjt
Try this using jQuery
使用 jQuery 试试这个
<div class="tab active">
Option 1
</div>
<div class="tab">
Option 2
</div>
<script>
$(function(){
$(".tab").live("click", function(){
$(".tab").removeClass("active");
$(this).addClass("active");
});
});
</script>
回答by Phil
This is my guess:
这是我的猜测：
$('.tabActive, #tabInactive').click(function() {
$(this).toggleClass('active');
}
