js多Tab自动切换,带完善的鼠标事件

来源：互联网发布：mac硬盘不能拷贝编辑：程序博客网时间：2024/06/09 20:42

js多Tab自动切换，带完善的鼠标事件!

说明：打开鼠标时间后，鼠标经过标题时显示相应内容，鼠标经过标题或经过内容时停止自动切换，当鼠标移开时继续自动切换。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>js多Tab自动切换,带完善的鼠标事件，幸凡制作http://www.ok22.org</title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><mce:style></mce:style><style mce_bogus="1">*{margin:0;padding:);}body{font-size:25px}.tab_title{height:30px;line-height:30px;overflow:hidden;}.tab_title a,.tab_title a:link,.tab_title a:visited{padding:0 8px;display:block;background:#960;float:left;color:#fff;margin-right:5px;font-size:14px;}.tab_title a:hover {background:#999}.tab_title a.crent_tab:link {background:#ff0000}.tab_title a.crent_tab:visited {background:#ff0000}#tab_lista,#tab_listb,#tab_listc,#tab_listd{width:400px;}#tab_lista p.crent_div,#tab_listb p.crent_div,#tab_listc p.crent_div,#tab_listd p.crent_div{clear:both;font-size:20px;display:block;}#tab_lista p,#tab_listb p,#tab_listc p,#tab_listd p{display:none;margin:0;padding:5px;}#tab_lista p{background:#ccc}#tab_listb p {background:#ff9}#tab_listc p{background:#6ff}#tab_listd p{background:#f90;}</style></head><body><div id="tab_lista"> <div class="tab_title"> <a href="#" mce_href="#" class="crent_tab" id="a1">1</a> <a href="#" mce_href="#" id="a2">2</a> <a href="#" mce_href="#" id="a3">3</a> <a href="#" mce_href="#" id="a4">4</a> <a href="#" mce_href="#" id="a5">5</a>自动切换时间5秒 </div> <p class="crent_div" id="tab_a1">1</p> <p id="tab_a2">2</p> <p id="tab_a3">3</p> <p id="tab_a4">4</p> <p id="tab_a5">5</p> </div><div id="tab_listb"> <div class="tab_title"> <a href="#" mce_href="#" class="crent_tab" id="b1">b1</a> <a href="#" mce_href="#" id="b2">b2</a> <a href="#" mce_href="#" id="b3">b3</a> <a href="#" mce_href="#" id="b4">b4</a> <a href="#" mce_href="#" id="b5">b5</a> <a href="#" mce_href="#" id="b6">b6</a>自动切换时间3秒，已打开鼠标事件 </div> <p class="crent_div" id="tab_b1">b1</p> <p id="tab_b2">b2</p> <p id="tab_b3">b3</p> <p id="tab_b4">b4</p> <p id="tab_b5">b5</p> <p id="tab_b6">b6</p></div> <div id="tab_listc"> <div class="tab_title"> <a href="#" mce_href="#" class="crent_tab" id="c1">c1</a> <a href="#" mce_href="#" id="c2">c2</a> <a href="#" mce_href="#" id="c3">c3</a>不自动切换，鼠标事件打开 </div> <p class="crent_div" id="tab_c1">c1</p> <p id="tab_c2">c2</p> <p id="tab_c3">c3</p></div><div id="tab_listd"> <div class="tab_title"> <a href="#" mce_href="#" class="crent_tab" id="d1">c1</a> <a href="#" mce_href="#" id="d2">c2</a> <a href="#" mce_href="#" id="d3">c3</a>自动切换，鼠标事件打开 </div> <p class="crent_div" id="tab_d1">d1</p> <p id="tab_d2">d2</p> <p id="tab_d3">d3</p></div><mce:script type="text/javascript"></mce:script></body></html>

来自:http://www.ok22.org/art_detail.aspx?id=119