<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>不同標題切換不同內容</title>
<style type="text/css">
ul,li {
margin: 0;
padding: 0;
list-style: none;
}
#tabfirst li {
float: left;
background-color: #868686;
color: white;
padding: 5px;
margin-right: 2px;
border: 1px solid white;
}
#tabfirst li.tabin {
background-color: #6E6E6E;
border: 1px solid #6E6E6E;
}
div.contentfirst {
clear: left;
background-color: #6E6E6E;
color: white;
width: 300px;
height: 100px;
padding: 10px;
display: none;
}
div.contentin {
display: block;
}
</style>
<script type="text/javascript">
function showdiv(s){
if(s=="1"){
document.getElementById("content1").className="contentin contentfirst";//顯示標題1的內容 下面代碼類似不在添加註釋
document.getElementById("content2").className="contentfirst";//隱藏標題2的內容 下面代碼類似不在添加註釋
document.getElementById("content3").className="contentfirst";//隱藏標題3的內容 下面代碼類似不在添加註釋
document.getElementById("li2").className=null;//使標題2與正文內容相離 下面代碼類似 不在添加註釋
document.getElementById("li1").className="tabin";//使標題一與正文內容相連接 下面代碼類似 不在添加註釋
document.getElementById("li3").className=null;//使標題3與正文內容相離 下面代碼類似 不在添加註釋
}else if(s=="2"){
document.getElementById("content1").className="contentfirst";
document.getElementById("content2").className="contentin contentfirst";
document.getElementById("content3").className="contentfirst";
document.getElementById("li1").className=null;
document.getElementById("li2").className="tabin";
document.getElementById("li3").className=null;
}else{
document.getElementById("content1").className="contentfirst";
document.getElementById("content3").className="contentin contentfirst";
document.getElementById("content2").className="contentfirst";
document.getElementById("li1").className=null
document.getElementById("li3").className="tabin";
document.getElementById("li2").className=null
}
}
</script>
</head>
<body>
<ul id="tabfirst">
<li class='tabin' id="li1" > <a href="#" onMouseOver="showdiv('1')"> 01 </a></li>
<li id="li2"> <a href="#" onMouseOver="showdiv('2')"> 02 </a></li>
<li id="li3"> <a href="#" onMouseOver="showdiv('3')"> 03 </a></li>
</ul>
<div class="contentin contentfirst" id="content1">我是第一個內容</div>
<div class="contentfirst" id="content2">我是第二個內容</div>
<div class="contentfirst" id="content3">我是第三個內容</div>
</body>
</html>
鼠標經過 內容變換
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
Shader 特效——“水面波紋消散” 的實現 【GLSL】
視頻效果： bilibili: Shader 特效——水面波紋消散 youku: Shader 特效——水面波紋消散 圖片效果： 原理詳解：
一個無聊的前端工程師上廁所的時候寫了一款雪花掉落的特效
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> // 需要自己引入jquery.min.js
Android一行代碼設置字符串中部分關鍵字高亮
0.需要的效果 1.實現 /** * * @param str 全部的字符串 * @param needHighStr 需要高亮的字符串 * @return 這裏默認高亮的是屎黃色