来自 系统操作 2019-09-04 19:47 的文章
当前位置: 六合联盟网 > 系统操作 > 正文

JS完成淡深藕红简洁竖向Tab点击切换效果,轻巧纯

四个没有必要jQuery实现的tab选项卡切换效果,代码简洁易用。
默许是鼠标悬停显示tab效果,可将里面包车型客车onmouseover 修改为 onclick 点击效果

正文实例陈述了JS达成油红褐简洁竖向Tab点击切换效果。分享给我们供大家参照他事他说加以考察。具体如下:

利用方法:

这里介绍一款淡铁蓝竖向简洁Tab,选项卡,是十分多人都爱好的一种风格。

1、将附属类小部件中的index.html中的css样式以及代码部分拷贝到你需求的地方就能够
相关链接:几行简单的jQuery代码消除tab标签切换效果

运转效果截图如下:

展现效果图:

图片 1

图片 2

在线演示地址如下:

作用显示  源码下载

<!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>点击切换选项卡代码</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.tab1{width:401px;border-top:#cccccc solid 1px;border-bottom:#cccccc solid 1px;margin:50px auto 0 auto;}
.menu{height:28px;border-right:#cccccc solid 1px;}
.menu li{float:left;width:99px;text-align:center;line-height:28px;height:28px;cursor:pointer;border-left:#cccccc solid 1px;color:#666;font-size:14px;overflow:hidden;background:#E0E2EB;}
.menu li.off{background:#FFFFFF;color:#336699;font-weight:bold;}
.menudiv{height:200px;border-left:#cccccc solid 1px;border-right:#cccccc solid 1px;border-top:0;background:#fefefe}
.menudiv div{padding:15px;line-height:28px;}
</style>
<script type="text/javascript">
function setTab(name,cursel){
cursel_0=cursel;
for(var i=1; i<=links_len; i++){
var menu = document.getElementById(name+i);
var menudiv = document.getElementById("con_"+name+"_"+i);
if(i==cursel){
menu.className="off";
menudiv.style.display="block";
}
else{
menu.className="";
menudiv.style.display="none";
}
}
}
function Next(){
cursel_0++;
if (cursel_0>links_len)cursel_0=1
setTab(name_0,cursel_0);
}

var name_0='one';
var cursel_0=1;
var ScrollTime=3000;//循环周期(毫秒)
var links_len,iIntervalId;
onload=function(){
var links = document.getElementById("tab1").getElementsByTagName('li')
links_len=links.length;
for(var i=0; i<links_len; i++){
links[i].onmouseover=function(){
clearInterval(iIntervalId);
this.onmouseout=function(){
iIntervalId = setInterval(Next,ScrollTime);;
}
}
}
document.getElementById("con_"+name_0+"_"+links_len).parentNode.onmouseover=function(){
clearInterval(iIntervalId);
this.onmouseout=function(){
iIntervalId = setInterval(Next,ScrollTime);;
}
}
setTab(name_0,cursel_0);
iIntervalId = setInterval(Next,ScrollTime);
}
</script>
</head>
<body>
<div class="tab1" id="tab1">
<div class="menu">
<ul>
<li id="one1" onclick="setTab('one',1)">首页</li>
<li id="one2" onclick="setTab('one',2)">点击看看</li>
<li id="one3" onclick="setTab('one',3)">会自动的</li>
<li id="one4" onclick="setTab('one',4)">我的网站</li>
</ul>
</div>
<div class="menudiv">
<div id="con_one_1">我的网站</div>
<div id="con_one_2" style="display:none;">JS代码,导航菜单</div>

<div id="con_one_3" style="display:none;">看到效果了吗???</div>
<div id="con_one_4" style="display:none;">我的网站我做主</div>
</div>
</div>
<div style="text-align:center;clear:both;"></div>
</body>
</html>

实际代码如下:

以上内容就是本文使用简易纯js达成点击切换TAB标签实例,希望对我们学习js知识制作网页特效有所协理。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>简洁Tab</title>
<style type="text/css">
<!--
body{ padding:0;font:12px "宋体"; }
#lib_Tab1_sx{width:500px;margin:0px;padding:0px;margin-bottom:15px; overflow:hidden;}
.lib_tabborder_sx{border:1px solid #95C9E1;}
.lib_Menubox_sx {line-height:28px;position:relative; float:left; width:130px; height:240px;border-right:1px solid #95C9E1;}
.lib_Menubox_sx ul{margin:0px;padding:0px;list-style:none; position:absolute; top:15px; left:5px; margin-left:10px; height:25px;text-align:center;}
.lib_Menubox_sx li{display:block;cursor:pointer;width:114px;color:#949694;font-weight:bold; margin-bottom:5px;height:25px;line-height:25px; background-color:#E4F2FD}
.lib_Menubox_sx li.hover{padding:0px;background:#fff;width:116px;border:1px solid #95C9E1; border-right:0;
color:#739242;height:25px;line-height:25px;}
.lib_Contentbox_sx{margin-top:0px; border-top:none;padding:20px; border-left:0; margin-left:130px;}
-->
</style>
<script>
<!--
function setTab(name,cursel,n){
 for(i=1;i<=n;i++){
 var menu=document.getElementById(name+i);
 var con=document.getElementById("con_"+name+"_"+i);
 menu.className=i==cursel?"hover":"";
 con.style.display=i==cursel?"block":"none";
 }
}
//-->
</script>
</head>
<body>
<div id="lib_Tab1_sx" class="lib_tabborder_sx">
<div class="lib_Menubox_sx ">
<ul>
  <li id="one1" onclick="setTab('one',1,5)" class="hover">脚本代码</li>
  <li id="one2" onclick="setTab('one',2,5)" >ASP类</li>
  <li id="one3" onclick="setTab('one',3,5)">PHP类</li>  
  <li id="one4" onclick="setTab('one',4,5)">JSP类</li>
  <li id="one5" onclick="setTab('one',5,5)">.NET类</li>
</ul>
</div>
 <div class="lib_Contentbox_sx "> 
  <div id="con_one_1" >脚本列表</div>
  <div id="con_one_2" style="display:none">ASP类更新</div>
  <div id="con_one_3" style="display:none">PHP类更新</div>
  <div id="con_one_4" style="display:none">JSP类更新</div> 
  <div id="con_one_5" style="display:none">ASP.NET类更新</div> 
 </div>
</div>
</body>
</html>

你或者感兴趣的小说:

  • js达成点击切换TAB标签实例
  • JS完成淡象牙黄简洁竖向Tab点击切换效果
  • JavaScript 完结 Tab 点击切换实例代码
  • javascript兑现tab切换的两种办法
  • js(JavaScript)完毕TAB标签切换效果的轻巧实例
  • javascript贯彻tabs选项卡切换效果(自写原生js)
  • Vue.js组件tabs达成选项卡切换效果
  • 用AngularJS的授命达成tabs切换效果
  • JS+CSS实现滑动切换tab菜单功用
  • 完美的js tab图片轮换效果代码(可自定义的幻灯片和图表缓冲切换)
  • JavaScript达成的轻便Tab点击切换效用示例

期待本文所述对我们的JavaScript程序设计有着支持。

你可能感兴趣的篇章:

  • js实现点击切换TAB标签实例
  • 简轻易单纯js完毕点击切换TAB标签实例
  • JavaScript 完结 Tab 点击切换实例代码
  • javascript贯彻tab切换的二种格局
  • js(JavaScript)达成TAB标签切换效果的简便实例
  • javascript完毕tabs选项卡切换效果(自写原生js)
  • Vue.js组件tabs完毕选项卡切换效果
  • 用AngularJS的通令达成tabs切换效果
  • JS+CSS达成滑动切换tab菜单成效
  • 杰出的js tab图片轮换效果代码(可自定义的幻灯片和图表缓冲切换)
  • JavaScript兑现的轻易Tab点击切换功效示例

本文由六合联盟网发布于系统操作,转载请注明出处:JS完成淡深藕红简洁竖向Tab点击切换效果,轻巧纯

关键词: