專案筆記：點選按鈕後使其保持點選時的狀態
在Web開發時，有不少選項卡切換的例項，當點選一個選項卡時要使其一直保持點選時的狀態，直到點選下一個選項卡切換到另一個選項卡才改變按鈕顏色，之前在專案中有遇到這樣的問題，現在將幾種方法做一總結。
多個選項卡切換
1.使用原生JS切換style
給每一個按鈕新增一個點選事件，每個按鈕傳入函式的引數不一樣，JS中利用傳入的引數判斷是哪個按鈕發生點選事件，然後改變按鈕的style
<script type="text/javascript">
function buttonclick(t){
if(t==1){
document.getElementById("b1").style.background="#ff0000";
document.getElementById("b2").style.background="#ffffff";
}
if(t==2){
document.getElementById("b2").style.background="#ff0000";
document.getElementById("b1").style.background="#ffffff";
}
}
</script>
<body>
<div class="main">
<button id="b1" onclick="buttonclick(1)">button1</button>
<button id="b2" onclick="buttonclick(2)">button2</button>
</div>
</body>
但是這種方法對於選項卡較多的不適用，程式碼太複雜，不推薦使用
2.JQuery取消當前選項卡的mouseout()和mouseover()事件
首先init()函式初始化button,
<script type="text/javascript">
$(function () {
var init = function () {
$(".main button").css("background", "");
$(".main button").mouseover(function () {
$(this).css("background", "#ff0000");
})
.mouseout(function () {
$(this).css("background", "");
})
};
init();
$(".main button")
.click(function () {
init();
$(this).css("background", "#ff0000");
$(this).unbind("mouseout");
$(this).unbind("mouseover");
});
})
</script>
<body><div class="main">
<button>button1</button>
<button>button2</button>
<button>button3</button>
</div>
</body>
在做這種方法的時候有考慮到是不是可以不用取消mouseover()和mouseout()事件，改變按鈕的disabled，但是這樣的話按鈕就會被禁用，不能達到指定的style。
3.setTable滑鼠懸浮/點選切換
為一組選項卡編號，setTab(id,cursel,n)函式切換選項卡的class,id為被點選選項卡的id，cursel為選項卡的編號，n為選項卡總數
<script type="text/javascript">
function setTab(name,cur,n)
{
for(i=1;i<=n;i++)
{
var menu=document.getElementById(name+i);
menu.className=i==cur?"click":"";
}
}
</script>
<style type="text/css">
.click{
background-color: #ff0000;
}
</style>
<body>
<div class="main">
<button id="b1" onclick="setTab('b',1,3)">button1</button>
<button id="b2" onclick="setTab('b',2,3)">button2</button>
<button id="b3" onclick="setTab('b',3,3)">button3</button>
</div>
</body>
單個選項卡點選切換style
一個選項卡的切換不像一組選項卡切換那樣有參照物，所以得設定一個標記記錄選項卡的狀態
<script>
var t=false; //t記錄當前按鈕的狀態
function buttonclick(){
if(t==false)
{
document.getElementById("b1").className="bb1";
t=true;
}
else{
document.getElementById("b1").className="";
t=false;
}
}
</script>
<style type="text/css">
.bb1{
background-color: #ff0000;
}
</style>
<body>
<div class="managementPanel">
<button id="b1" onclick="buttonclick()">div1</button>
</div>
</body>