滑動TAB，滑動門，CSS+Js代碼

2024-09-05 12:20:38

字體：大中小

來源：轉載

供稿：網友

滑動TAB，滑動門，CSS+Js代碼，貌似很不錯的樣子，風格經典，鼠標感應很不錯，代碼量少，用到網頁上挺不錯的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>滑動TAB</title><script language="javascript">function tabChange(obj,id){	var arrayli = obj.parentNode.getElementsByTagName("li"); //獲取li數組	var arrayul = document.getElementById(id).getElementsByTagName("ul"); //獲取ul數組	for(i=0;i<style type="text/css">.tabbox {width:300px;height:250px;}.tabmenu {width:295px;height:28px;border-left:1px solid  #CCC;border-top:1px solid #ccc;}.tabmenu ul {margin:0;padding:0;list-style-type: none;}.tabmenu li { text-align:center; float:left; display:block; width:58px; height:27px; overflow:hidden; background-color: #D2E8F7; line-height:27px; border-right:#ccc 1px solid; border-bottom:#ccc 1px solid; display:inline; font-size:12px;}.tabmenu .cli {text-align:center;float:left;display:block;width:58px;height:27px;overflow:hidden;background-color: #fff;line-height:27px;border-right:#ccc 1px solid;border-bottom:#fff 1px solid;display:inline;font-size:12px; cursor:pointer;}#tabcontent {width:294px;background-color:#fff;border-left:#CCC 1px solid;border-right:#CCC 1px solid;border-bottom:#CCC 1px solid;}#tabcontent ul {margin:0;padding:5px;list-style-type: none;}#tabcontent .hidden {display:none;}</style></head><body>	<div   id="iwvjtn8m0"   class="tabbox">		<div   id="iwvjtn8m0"   class="tabmenu">			<ul>				<li onmouseover="tabChange(this,'tabcontent')" class="cli">軍事</li>				<li onmouseover="tabChange(this,'tabcontent')">娛樂</li>				<li onmouseover="tabChange(this,'tabcontent')">國內</li>				<li onmouseover="tabChange(this,'tabcontent')">國外</li>				<li onmouseover="tabChange(this,'tabcontent')">游戲</li>			</ul>		</div>		<div   class="iwvjtn8m0"   id="tabcontent">			<ul name="tabul">				<li>1111111111111111111111</li>				<li>1111111111111111111111</li>				<li>1111111111111111111111</li>				<li>1111111111111111111111</li>				<li>1111111111111111111111</li>				<li>1111111111111111111111</li>			</ul>			<ul class="hidden">				<li>2222222222222222222222</li>				<li>2222222222222222222222</li>				<li>2222222222222222222222</li>				<li>2222222222222222222222</li>				<li>2222222222222222222222</li>				<li>2222222222222222222222</li>			</ul>			<ul class="hidden">				<li>3333333333333333333333</li>				<li>3333333333333333333333</li>				<li>3333333333333333333333</li>				<li>3333333333333333333333</li>				<li>3333333333333333333333</li>				<li>3333333333333333333333</li>			</ul>			<ul class="hidden">				<li>4444444444444444444444</li>				<li>4444444444444444444444</li>				<li>4444444444444444444444</li>				<li>4444444444444444444444</li>				<li>4444444444444444444444</li>				<li>4444444444444444444444</li>			</ul>			<ul class="hidden">				<li>5555555555555555555555</li>				<li>5555555555555555555555</li>				<li>5555555555555555555555</li>				<li>5555555555555555555555</li>				<li>5555555555555555555555</li>				<li>5555555555555555555555</li>			</ul>		</div>	</div></body></html>

上一篇：一個功能綜合的CSS滑動門特效代碼

下一篇：CSS代碼精簡的二級菜單