ホームページ > 記事 > ウェブフロントエンド > HTML5 はタブ切り替えを実装します (js コードを介して)
HTML5 はタブ切り替えを実装します (js コードを介して)
- 不言オリジナル
- 2018-08-09 15:09:595740ブラウズ
この記事では、HTML5 でのタブ切り替えの実装を (js コードを使用して) 紹介します。必要な方は参考にしていただければ幸いです。
<!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>おすすめ関連記事:
以上がHTML5 はタブ切り替えを実装します (js コードを介して)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。