jsタブ【マウスのタイトルは、対応する内容を表示し、他のタイトルの色を変えて隠します】…
8959 ワード
<span style="color:#000000;">
$(document).ready(</span><span style="color:#0000ff;">function</span><span style="color:#000000;"> () {
setTab(</span>'Label', 1, 7<span style="color:#000000;">)
});
</span><span style="color:#0000ff;">function</span><span style="color:#000000;"> setTab(name, cursel, n) {
</span><span style="color:#0000ff;">for</span> (i = 1; i <= n; i++<span style="color:#000000;">) {
</span><span style="color:#0000ff;">var</span> menu = document.getElementById(name +<span style="color:#000000;"> i);
</span><span style="color:#0000ff;">var</span> con = document.getElementById("con_" + name + "_" +<span style="color:#000000;"> i);
</span><span style="color:#0000ff;">if</span> (cursel == 1<span style="color:#000000;">) {
document.getElementById(</span>"label1").style.color = "red"<span style="color:#000000;">;
document.getElementById(</span>"label2").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label3").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label4").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label5").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label6").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label7").style.color = "black"<span style="color:#000000;">;
}
</span><span style="color:#0000ff;">else</span> <span style="color:#0000ff;">if</span> (cursel == 2<span style="color:#000000;">) {
document.getElementById(</span>"label1").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label2").style.color = "red"<span style="color:#000000;">;
document.getElementById(</span>"label3").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label4").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label5").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label6").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label7").style.color = "black"<span style="color:#000000;">;
}
</span><span style="color:#0000ff;">else</span> <span style="color:#0000ff;">if</span> (cursel == 3<span style="color:#000000;">) {
document.getElementById(</span>"label1").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label2").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label3").style.color = "red"<span style="color:#000000;">;
document.getElementById(</span>"label4").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label5").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label6").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label7").style.color = "black"<span style="color:#000000;">;
}
</span><span style="color:#0000ff;">else</span> <span style="color:#0000ff;">if</span> (cursel == 4<span style="color:#000000;">) {
document.getElementById(</span>"label1").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label2").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label3").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label4").style.color = "red"<span style="color:#000000;">;
document.getElementById(</span>"label5").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label6").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label7").style.color = "black"<span style="color:#000000;">;
}
</span><span style="color:#0000ff;">else</span> <span style="color:#0000ff;">if</span> (cursel == 5<span style="color:#000000;">) {
document.getElementById(</span>"label1").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label2").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label3").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label4").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label5").style.color = "red"<span style="color:#000000;">;
document.getElementById(</span>"label6").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label7").style.color = "black"<span style="color:#000000;">;
}
</span><span style="color:#0000ff;">else</span> <span style="color:#0000ff;">if</span> (cursel == 6<span style="color:#000000;">) {
document.getElementById(</span>"label1").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label2").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label3").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label4").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label5").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label6").style.color = "red"<span style="color:#000000;">;
document.getElementById(</span>"label7").style.color = "black"<span style="color:#000000;">;
}
</span><span style="color:#0000ff;">else</span> <span style="color:#0000ff;">if</span> (cursel == 7<span style="color:#000000;">) {
document.getElementById(</span>"label1").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label2").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label3").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label4").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label5").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label6").style.color = "black"<span style="color:#000000;">;
document.getElementById(</span>"label7").style.color = "red"<span style="color:#000000;">;
}
con.style.display </span>= i == cursel ? "block" : "none"<span style="color:#000000;">;
}
}
</span>
111
222
333
444
555
666
777
転載先:https://www.cnblogs.com/JiangXiaoTian/articles/2590071.html