js Tab选项卡特效代码

 <!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=utf-8" />
<title>Tab选项卡</title>
<style type="text/css">
body {font-size: 12px;}
ul {margin: 0;padding: 0;list-style: none;overflow: hidden;}
ul li {float: left;height: 25px;line-height: 25px;padding: 0 10px;cursor:pointer;}
#cn-lazy,#cn-lazy2{width: 380px;height: 180px;}
#cn-lazy div,#cn-lazy2 div{width: 380px;height: 165px;clear: both;display: none;}
.cn-current {background: #CCC;}
</style>
</head>
 
<body>
<div id="cn-lazy">
  <ul>
    <li class="cn-current">选项卡一</li>
    <li>选项卡二</li>
    <li>选项卡三</li>
  </ul>
  <div style="display:block">内容一</div>
  <div>内容二</div>
  <div>内容三</div>
</div>
<div id="cn-lazy2">
  <ul>
    <li class="cn-current">选项卡一</li>
    <li>选项卡二</li>
    <li>选项卡三</li>
  </ul>
  <div style="display:block">内容一</div>
  <div>内容二</div>
  <div>内容三</div>
</div>
 
<script type="text/javascript">
function cnTab(cnTable,cnNum){
var Tab= document.getElementById(cnTable).getElementsByTagName("ul");
Tab=Tab[0].getElementsByTagName("li");
var cnDiv= document.getElementById(cnTable).getElementsByTagName("div");
var TabNum = Tab.length;
var cnDivNum=cnDiv.length;
for(i=0;i<TabNum; i++){
Tab[i].className = "";
}
Tab[cnNum].className = "cn-current";
for(i=0;i<cnDivNum;i++){
cnDiv[i].style.display = "none";
}
cnDiv[cnNum].style.display = "block";
}
window.onload=function(){
var TabId=new Array("cn-lazy","cn-lazy2")
for(j=0;j<TabId.length;j++){
var Tab= document.getElementById(TabId[j]).getElementsByTagName("ul");
Tab=Tab[0].getElementsByTagName("li");
for(i=0;i<Tab.length;i++){
Tab[i].DivId=TabId[j];
Tab[i].LiId=i;
Tab[i].onclick=function(){
cnTab(this.DivId,this.LiId);
}
}
}
}
</script>
</body>
</html></td>
 </tr>
</table>

时间: 2024-12-09 18:50:40

js Tab选项卡特效代码的相关文章

js tab选项卡效果代码

/*********1**********/ 新闻 财经 娱乐 娱乐 新闻内容 财经内容 娱乐内容 娱乐内容3

js实现类似菜单风格的TAB选项卡效果代码_javascript技巧

本文实例讲述了js实现类似菜单风格的TAB选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款基于javascript实现的一组简洁选项卡代码,类似菜单风格的TAB选项卡,没有使用图片,因此有些地方处理的还不太到位,不介意使用图片修饰的朋友可以再次美化这上选项卡,风格有点类似于菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-menu-style-tab-nav-codes/ 具体代码如下: <html xmlns="ht

JS实现不规则TAB选项卡效果代码_javascript技巧

本文实例讲述了JS实现不规则TAB选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款不规则TAB选项卡效果,将中规中矩的方角换成了不规则的圆角,也就是这一换,倒让浏览者新鲜了不少,也使选项卡增多了几份灵感,不是吗? 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-box-tab-nav-style-menu-codes/ 具体代码如下: <html> <head> <meta http-equiv="C

JS实现黑色风格的网页TAB选项卡效果代码_javascript技巧

本文实例讲述了JS实现黑色风格的网页TAB选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款网页TAB选项卡JS代码,黑色超酷的风格,看了后你会喜欢的,很熟悉很经典的风格,似曾相识的感觉,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-black-style-web-tab-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition

JS+CSS实现的经典tab选项卡效果代码_javascript技巧

本文实例讲述了JS+CSS实现的经典tab选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款经典的JavaScript+CSS tab选项卡代码,由以前的一款改写而成,自认为不错的东西,发上来分享吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jd-tab-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio

JS实现的不规则TAB选项卡效果代码_javascript技巧

本文实例讲述了JS实现的不规则TAB选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款采用菱形的选项卡效果,一改选项卡中规中矩的风格,效果非常不错,奉献给大家. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-bgz-tab-cha-style-codes/ 具体代码如下: <html> <head> <meta http-equiv="Content-Type" content="

基于HTML+CSS+JS实现增加删除修改tab导航特效代码_jquery

先给大家展示下效果图,如果大家感觉还不错,请参考实现代码哦! HTML: <div class="container iden_top"> <ul> <li> <p class='iden_add_name'>应用标识1</p> <span class="iden_top_button"></span> <div class="iden_top_dete"&

很棒的js Tab选项卡切换效果_javascript技巧

本文实例为大家分享了js Tab选项卡切换效果,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab</title> <style> *{margin:0; padding:0; list-style:none;} .box{ width: 1000px; over

jQuery实现滚动切换的tab选项卡效果代码_jquery

本文实例讲述了jQuery实现滚动切换的tab选项卡效果代码.分享给大家供大家参考.具体如下: 这里介绍的jquery tab选项卡滚动动态切换代码,似乎很个性的网页选项卡,没有边框的修饰,但十分简约大方,选项卡菜单目前在各大网站很流行,做为前端设计者,能够得心应手的写出一个选项卡是很有必要的哦,希望本代码能为您带去一份参考资料. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-scroll-cha-tab-nav-style-