经典实用选项卡滑动切换特效，当用户的鼠标经过时立即切换显示，带三角形箭头指向效果。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>带箭头指向选项卡切换特效_武鸣人</title>
<style type="text/css">
*{ margin:0; padding:0; font-size:12px;}
body{
padding:30px;
}
.tabsbox_wuming_ren{ width:400px; margin:20px auto;}
.tabs_wuming{ height:20px;}
.tabs_wuming li{ width:80px; text-align:center; padding-top:2px; line-height:18px; float:left; background-color:#ccc; margin-right:5px; list-style:none; position:relative; cursor:pointer; color:#333;}
.tabs_wuming li span{ display:none;}
.tabs_wuming .wuming{ background-color:#f0f0f0;}
.tabs_wuming .wuming span{ display:block; width:1px; height:1px; border:solid 8px; border-color:#f0f0f0 #fff #fff #fff; position:absolute; top:20px; left:32px; overflow:hidden; z-index:-1;}
.con_wwwwumingren{ height:120px; padding:8px 12px; overflow:hidden; border:1px solid #f0f0f0; position:relative; z-index:1;}
.con_wwwwumingren ul li{ list-style:none; line-height:20px;}
.hidden{ display:none;}
.block{ display:block;}
</style>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div class="tabsbox_wuming_ren">
<ul id="wuming__ren" class="tabs_wuming">
<li class="wuming">武鸣人一号<span></span></li>
<li>武鸣人二号<span></span></li>
<li>武鸣人三号<span></span></li>
<li>武鸣人四号<span></span></li>
</ul>
<div id="tabscon_wumingren" class="con_wwwwumingren">
<ul>
<li><a href="https://www.wuming.ren" target="_blank">武鸣人，各种信息免费发布！一号标题111</a></li><li><a href="https://www.wuming.ren" target="_blank">武鸣人，各种信息免费发布！二号标题</a></li><li><a href="https://www.wuming.ren" target="_blank">武鸣人，各种信息免费发布！三号标题</a></li><li><a href="https://www.wuming.ren" target="_blank">武鸣人，各种信息免费发布！四号标题</a></li><li><a href="https://www.wuming.ren" target="_blank">武鸣人，各种信息免费发布！五号标题</a></li><li><a href="https://www.wuming.ren" target="_blank">武鸣人，各种信息免费发布！六号标题</a></li>
</ul>
<ul>
<li><a href="https://www.wuming.ren" target="_blank">武鸣人，各种信息免费发布！一号标题222</a></li><li><a href="https://www.wuming.ren" target="_blank">武鸣人，各种信息免费发布！二号标题</a></li><li><a href="https://www.wuming.ren" target="_blank">武鸣人，各种信息免费发布！三号标题</a></li><li><a href="https://www.wuming.ren" target="_blank">武鸣人，各种信息免费发布！四号标题</a></li><li><a href="https://www.wuming.ren" target="_blank">武鸣人，各种信息免费发布！五号标题</a></li><li><a href="https://www.wuming.ren" target="_blank">武鸣人，各种信息免费发布！六号标题</a></li>
</ul>
<ul>
<li><a href="https://www.wuming.ren" target="_blank">武鸣人，各种信息免费发布！一号标题333</a></li><li><a href="https://www.wuming.ren" target="_blank">武鸣人，各种信息免费发布！二号标题</a></li><li><a href="https://www.wuming.ren" target="_blank">武鸣人，各种信息免费发布！三号标题</a></li><li><a href="https://www.wuming.ren" target="_blank">武鸣人，各种信息免费发布！四号标题</a></li><li><a href="https://www.wuming.ren" target="_blank">武鸣人，各种信息免费发布！五号标题</a></li><li><a href="https://www.wuming.ren" target="_blank">武鸣人，各种信息免费发布！六号标题</a></li>
</ul>
<ul>
<li><a href="https://www.wuming.ren" target="_blank">武鸣人网，各种信息免费发布！一号标题444</a></li><li><a href="https://www.wuming.ren" target="_blank">武鸣人网，各种信息免费发布！二号标题</a></li><li><a href="https://www.wuming.ren" target="_blank">武鸣人网，各种信息免费发布！三号标题</a></li><li><a href="https://www.wuming.ren" target="_blank">武鸣人网，各种信息免费发布！四号标题</a></li><li><a href="https://www.wuming.ren" target="_blank">武鸣人网，各种信息免费发布！五号标题</a></li><li><a href="https://www.wuming.ren" target="_blank">武鸣人网，各种信息免费发布！六号标题</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
var lis = document.getElementById("wuming__ren").getElementsByTagName("li");
var uls = document.getElementById("tabscon_wumingren").getElementsByTagName("ul");
var order = 0;
for(var i=0; i<lis.length; i++){
lis[i].value = i;
lis[i].onmouseover = function(){
ChangeTabs(this.value);
};
uls[i].className = "hidden";
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
lis[order].className = "wuming";
uls[order].className = "block";
function ChangeTabs(nowTab){
lis[order].className = "";
uls[order].className = "hidden";
order = nowTab
lis[nowTab].className = "wuming";
uls[nowTab].className = "block";
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</body>
</html>本文来自武鸣人网站，转载请注明出处