suchen

Heim  >  Artikel  >  Web-Frontend  >  HTML5 implementiert Tab-Wechsel (über JS-Code)

HTML5 implementiert Tab-Wechsel (über JS-Code)

不言
不言Original
2018-08-09 15:09:595752Durchsuche

Dieser Artikel führt Sie in die Implementierung des Tab-Wechsels in HTML5 ein (über JS-Code). Ich hoffe, dass er für Freunde hilfreich ist. 

<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"/>
<title>javascript实现Tab切换</title>
<style>
*{padding:0px;margin:0px;}
ul li {
cursor:pointer;
float:left;
width:100px;
height:30px;
line-height:30px;
text-align:center;
background-color:#fff;
border:1px #bbb solid;
border-bottom:none;
}
ul li.fli {
background-color:#ccc;
color:red;
}
ul {
overflow:hidden;
list-style:none;
}
#tab_con {
width:304px;
height:200px;
}
#tab_con p{
width:304px;
height:200px;
display:none;
border:1px #bbb solid;
border-top:none;
text-align:center;
}
#tab_con p.fp {
display:block;
background-color:#ccc;
}
p:not(#tab_con){
padding:20px 0px;
color:blue;
}
</style>
</head>
<body>
<ul id="tab">
<li class="fli">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<p id="tab_con">
<p class="fp">这是清华大学的校徽<img src="images/01.jpg"></p>
<p>这是浙江大学的校徽<img src="images/02.jpg"></p>
<p>这是华中科大的校徽<img src="images/03.jpg"></p>
</p>
<script>
var tabs=document.getElementById("tab").getElementsByTagName("li");
var ps=document.getElementById("tab_con").getElementsByTagName("p");
for (var i=0;i<tabs.length;i++) {
tabs[i].onmouseover=function(){
change(this);
}}
function change(obj){
for (var i=0;i<tabs.length;i++){
if(tabs[i]==obj) {
tabs[i].className="fli";
ps[i].className="fp";
}
else {
tabs[i].className="";
ps[i].className=""
} } }
</script>

Empfohlene verwandte Artikel:

HTML5-Attribut: Verwendungsbeispiel des Margin-Attributs

Beispielcode des div-Tags in HTML5

HTML5-Attribute: Verwendungsbeispiele für Formularattribute

Das obige ist der detaillierte Inhalt vonHTML5 implementiert Tab-Wechsel (über JS-Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：HTML5-Attribute: Verwendungsbeispiele für Margin-AttributeNächster Artikel：HTML5-Attribute: Verwendungsbeispiele für Margin-Attribute

In Verbindung stehende Artikel

Mehr sehen