JsTAB选项卡示例集合(二)

最新推荐文章于 2024-09-18 22:42:47 发布
最新推荐文章于 2024-09-18 22:42:47 发布
阅读量340 收藏 1
点赞数
分类专栏： Javascript 文章标签： ASP.net ASP VC++ JavaScript VB.NET ViewUI

仿163的一款TAB选项卡，有的人也称它为网页标签。本标签用到了三个gif背景图片，运行的时候可以点右键保存；无意发现了一这一个，觉得很不错应该奉献给大家，因为它不但美观，而且兼容性好，标签还可以自适应宽度，非常实用

 

<!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>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>
BODY {
	FONT-SIZE: 14px;
}
OL LI {
	MARGIN: 8px
}
#con {
	FONT-SIZE: 12px;
	MARGIN: 0px auto;
	WIDTH: 600px
}
#tags {
	PADDING-RIGHT: 0px;
	PADDING-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	MARGIN: 0px 0px 0px 10px;
	WIDTH: 400px;
	PADDING-TOP: 0px;
	HEIGHT: 23px
}
#tags LI {
	BACKGROUND: url(http://jhxk.iteye.com/upload/attachment/136408/f89059e8-7235-30c7-956f-6944089cd2a3.gif) no-repeat left bottom;
	FLOAT: left;
	MARGIN-RIGHT: 1px;
	LIST-STYLE-TYPE: none;
	HEIGHT: 23px
}
#tags LI A {
	PADDING-RIGHT: 10px;
	PADDING-LEFT: 10px;
	BACKGROUND: url(http://jhxk.iteye.com/upload/attachment/136410/bfc50a6e-4732-375e-8769-8c6ee90a5618.gif) no-repeat right bottom;
	FLOAT: left;
	PADDING-BOTTOM: 0px;
	COLOR: #999;
	LINE-HEIGHT: 23px;
	PADDING-TOP: 0px;
	HEIGHT: 23px;
	TEXT-DECORATION: none
}
#tags LI.emptyTag {
	BACKGROUND: none transparent scroll repeat 0% 0%;
	WIDTH: 4px
}
#tags LI.selectTag {
	BACKGROUND-POSITION: left top;
	MARGIN-BOTTOM: -2px;
	POSITION: relative;
	HEIGHT: 25px
}
#tags LI.selectTag A {
	BACKGROUND-POSITION: right top;
	COLOR: #000;
	LINE-HEIGHT: 25px;
	HEIGHT: 25px
}
#tagContent {
	BORDER-RIGHT: #aecbd4 1px solid;
	PADDING-RIGHT: 1px;
	BORDER-TOP: #aecbd4 1px solid;
	PADDING-LEFT: 1px;
	PADDING-BOTTOM: 1px;
	BORDER-LEFT: #aecbd4 1px solid;
	PADDING-TOP:1px;
	BORDER-BOTTOM: #aecbd4 1px solid;
	BACKGROUND-COLOR: #fff
}
.tagContent {
	PADDING-RIGHT: 10px;
	DISPLAY: none;
	PADDING-LEFT: 10px;
	BACKGROUND: url(http://jhxk.iteye.com/upload/attachment/136408/f89059e8-7235-30c7-956f-6944089cd2a3.gif) repeat-x;
	PADDING-BOTTOM: 10px;
	WIDTH: 576px;
	COLOR: #474747;
	PADDING-TOP: 10px;
	HEIGHT: 250px
}
#tagContent DIV.selectTag {
	DISPLAY: block
}
</STYLE>
</HEAD>
<BODY>
<DIV id=con>
  <UL id=tags>
    <LI><A onClick="selectTag('tagContent0',this)" 
  href="javascript:void(0)">源码爱好者</A> </LI>
    <LI class=selectTag><A onClick="selectTag('tagContent1',this)" 
  href="javascript:void(0)">ASP源码</A> </LI>
    <LI><A onClick="selectTag('tagContent2',this)" 
  href="javascript:void(0)">自适应宽度的标签</A> </LI>
  </UL>
  <DIV id=tagContent>
    <DIV class=tagContent id=tagContent0>源码爱好者（<a href="http://www.codefans.net">CoreFans.net</a>）提供各类编程源码、书籍教程、JavaScript/CSS特效代码以及常用软件下载等，做有质量的学习型源码下载站。</DIV>
    <DIV class="tagContent selectTag" id=tagContent1>这时是ASP标签的内容。</DIV>
    <DIV class=tagContent id=tagContent2>自适应宽度的标签内容。</DIV>
  </DIV>
</DIV>
<SCRIPT type=text/javascript>
function selectTag(showContent,selfObj){
	// 标签
	var tag = document.getElementById("tags").getElementsByTagName("li");
	var taglength = tag.length;
	for(i=0; i<taglength; i++){
	tag[i].className = "";
	}
	selfObj.parentNode.className = "selectTag";
	// 标签内容
	for(i=0; j=document.getElementById("tagContent"+i); i++){
	j.style.display = "none";
	}
	document.getElementById(showContent).style.display = "block";
}
</SCRIPT>
</BODY>
</HTML>

 

淡蓝色竖向简洁Tab 

淡蓝色竖向简洁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>
<title>div+css+js实现菜单的收缩与展开</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
	margin: 30px auto;
}
ul {
	list-style: none;
}
#faq {
	font-size: 12px;
	width: 800px;
}
#faq li {
	margin: 0 0 10px;
	padding: 0 0 5px;
}
#faq dl {
	margin: 0;
	padding:0;
	display:inline;
}
#faq dt {
	font-weight:bold;
	cursor:pointer;
	line-height: 20px;
	padding: 0 0 5px 22px;
	border-bottom:1px #ccc dotted;
}
#faq dd {
	display:none;
	margin:0;
	padding: 5px 0 5px 20px;
	background:#E5ECF9;
	line-height: 180%;
}
</style>
<script type="text/javascript">
var lastFaqClick=null;
window.οnlοad=function(){
  var faq=document.getElementById("faq");
  var dls=faq.getElementsByTagName("dl");
  for (var i=0,dl;dl=dls[i];i++){
    var dt=dl.getElementsByTagName("dt")[0];//取得标题
     dt.id = "faq_dt_"+(Math.random()*100);
     dt.οnclick=function(){
       var p=this.parentNode;//取得父节点
        if (lastFaqClick!=null&&lastFaqClick.id!=this.id){
          var dds=lastFaqClick.parentNode.getElementsByTagName("dd");
          for (var i=0,dd;dd=dds[i];i++)
            dd.style.display='none';
        }
        lastFaqClick=this;
        var dds=p.getElementsByTagName("dd");//取得对应子节点，也就是说明部分
        var tmpDisplay='none';
        if (gs(dds[0],'display')=='none')
          tmpDisplay='block';
        for (var i=0;i<dds.length;i++)
          dds[i].style.display=tmpDisplay;
      }
  }
}

function gs(d,a){
  if (d.currentStyle){
    var curVal=d.currentStyle[a]
  }else{
    var curVal=document.defaultView.getComputedStyle(d, null)[a]
  }
  return curVal;
}
</script>
</head>
<body>
<ul id="faq">
  <li>
    <dl>
      <dt>关于源码爱好者网站</dt>
      <dd>源码爱好者（www.CoreFans.net）提供各类编程源码、书籍教程、JavaScript/CSS特效代码以及常用软件下载等，做有质量的学习型源码下载站。</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>源码爱好者是一个学习型源码下载站</dt>
      <dd>源码爱好者立志做一个最好的学习型源码下载站，欢迎您的经常光临，也欢迎提出宝贵建议！</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt>AjAX是什么？</dt>
      <dd>一种能够提升用户体验的WEB2.0新型技术，可以实现像电脑系统一样的操作体验，类似本地化的一种脚本技术。</dd>
    </dl>
  </li>
</ul>
</body>
</html>

 

自动定时切换的TAB选项卡/滑动门

这个滑动门特效不错，可以设定时间，自动循环切换，也可以鼠标控制，而且选项卡也比较漂亮，在新浪和百度见到过这种自动切换的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=gb2312" />
<title>Tabs - CodeFans.net</title>
<style>
#index_yp {
	width:235px;
	height:300px;
	float:left
}
.index_yp_card {
	width:235px;
	height:37px;
	float:left
}
.yp_card_0, .yp_card_2, .yp_card_4 {
	width:55px;
	height:37px;
	float:left;
	background-image:url(http://jhxk.iteye.com/upload/attachment/136440/9b1a9a8c-c348-3e2c-8a11-a3fe1d356ca0.png);
	text-align:center;
	color:#003366;
	font-weight:bold;
	line-height:32px;
	cursor:pointer
}
.yp_card_1, .yp_card_3, .yp_card_5, .yp_card_6 {
	width:45px;
	height:37px;
	float:left;
	background-image:url(http://jhxk.iteye.com/upload/attachment/136440/9b1a9a8c-c348-3e2c-8a11-a3fe1d356ca0.png);
	text-align:center;
	color:#333333;
	line-height:32px;
	cursor:pointer
}
.yp_card_0 {
	background-position:0px 0px
}
.yp_card_1 {
	background-position:-55px 0px
}
.yp_card_2 {
	background-position:-100px 0px
}
.yp_card_3 {
	background-position:-155px 0px
}
.yp_card_4 {
	background-position:-200px 0px
}
.yp_card_5 {
	background-position:-255px 0px
}
.yp_card_6 {
	background-position:-300px 0px
}
.index_yp_main {
	width:215px;
	height:262px;
	float:left;
	border:1px solid #71B3C6;
	border-top:0px!important;
	padding:0px 9px 0px 9px
}
.yp_main_content {
	width:201px;
	height:33px;
	float:left;
	border:1px solid #BCDCE4;
	background-color:#F1F8FA;
	margin-bottom:7px;
	padding:3px 6px 3px 6px;
	overflow:hidden
}
.yp_main_content dt {
	width:201px;
	height:13px;
	float:left;
	font-weight:normal;
	margin:0px;
	font-size:12px;
	padding-top:2px
}
.yp_main_content dd {
	width:201px;
	line-height:13px;
	float:left;
	font-weight:normal;
	margin:0px;
	font-size:12px;
	padding-top:3px;
	text-align:right
}
.yp_main_content img {
	padding:0px 0px 2px 3px
}
.yp_main_list {
	width:215px;
	float:left
}
#index_m2_ad {
	width:690px;
	height:100px;
	padding:5px 0px 0px 5px;
	float:left
}
</style>
</head>
<body>
<div id="index_yp">
  <!--yp1 start-->
  <div id="yp_card1" style="display:block">
    <div class="index_yp_card">
      <div οnmοuseοver="changeMc(1,1)" οnmοuseοut="hi()" class="yp_card_0">ASP</div>
      <div οnmοuseοver="changeMc(1,2)" οnmοuseοut="hi()" class="yp_card_3">PHP</div>
      <div οnmοuseοver="changeMc(1,3)" οnmοuseοut="hi()" class="yp_card_3">JSP</div>
      <div οnmοuseοver="changeMc(1,4)" οnmοuseοut="hi()" class="yp_card_3">VC++</div>
      <div οnmοuseοver="changeMc(1,5)" οnmοuseοut="hi()" class="yp_card_5">综合</div>
    </div>
    <div οnmοuseοver="changeMc(1,1)" οnmοuseοut="hi()" class="index_yp_main">ASP(循环周期(1秒))</div>
  </div>
  <!--end-->
  <!--yp2 start-->
  <div id="yp_card2" style="display:none">
    <div class="index_yp_card">
      <div οnmοuseοver="changeMc(2,1)" οnmοuseοut="hi()" class="yp_card_1">ASP</div>
      <div οnmοuseοver="changeMc(2,2)" οnmοuseοut="hi()" class="yp_card_2" >PHP</div>
      <div οnmοuseοver="changeMc(2,3)" οnmοuseοut="hi()" class="yp_card_3">JSP</div>
      <div οnmοuseοver="changeMc(2,4)" οnmοuseοut="hi()" class="yp_card_3">VC++</div>
      <div οnmοuseοver="changeMc(2,5)" οnmοuseοut="hi()" class="yp_card_5">综合</div>
    </div>
    <div οnmοuseοver="changeMc(2,2)" οnmοuseοut="hi()" class="index_yp_main">PHP(循环周期(1秒))</div>
  </div>
  <!--end-->
  <!--yp3 start-->
  <div id="yp_card3" style="display:none">
    <div class="index_yp_card">
      <div οnmοuseοver="changeMc(3,1)" οnmοuseοut="hi()" class="yp_card_1">ASP</div>
      <div οnmοuseοver="changeMc(3,2)" οnmοuseοut="hi()"class="yp_card_6">PHP</div>
      <div οnmοuseοver="changeMc(3,3)" οnmοuseοut="hi()" class="yp_card_2">JSP</div>
      <div οnmοuseοver="changeMc(3,4)" οnmοuseοut="hi()" class="yp_card_3">VC++</div>
      <div οnmοuseοver="changeMc(3,5)" οnmοuseοut="hi()" class="yp_card_5">综合</div>
    </div>
    <div οnmοuseοver="changeMc(3,3)" οnmοuseοut="hi()" class="index_yp_main">JSP(循环周期(1秒))</div>
  </div>
  <!--end-->
  <!--yp4 start-->
  <div id="yp_card4" style="display:none">
    <div class="index_yp_card">
      <div οnmοuseοver="changeMc(4,1)" οnmοuseοut="hi()" class="yp_card_1">ASP</div>
      <div οnmοuseοver="changeMc(4,2)" οnmοuseοut="hi()" class="yp_card_6">PHP</div>
      <div οnmοuseοver="changeMc(4,3)" οnmοuseοut="hi()" class="yp_card_6">JSP</div>
      <div οnmοuseοver="changeMc(4,4)" οnmοuseοut="hi()" class="yp_card_2">VC++</div>
      <div οnmοuseοver="changeMc(4,5)" οnmοuseοut="hi()" class="yp_card_5">综合</div>
    </div>
    <div οnmοuseοver="changeMc(4,4)" οnmοuseοut="hi()" class="index_yp_main">VC++(循环周期(1秒))</div>
  </div>
  <!--end-->
  <!--yp5 start-->
  <div id="yp_card5" style="display:none">
    <div class="index_yp_card">
      <div οnmοuseοver="changeMc(5,1)" οnmοuseοut="hi()" class="yp_card_1">ASP</div>
      <div οnmοuseοver="changeMc(5,2)" οnmοuseοut="hi()" class="yp_card_6">PHP</div>
      <div οnmοuseοver="changeMc(5,3)" οnmοuseοut="hi()" class="yp_card_6">JSP</div>
      <div οnmοuseοver="changeMc(5,4)" οnmοuseοut="hi()" class="yp_card_6">VC++</div>
      <div οnmοuseοver="changeMc(5,5)" οnmοuseοut="hi()" class="yp_card_4">综合</div>
    </div>
    <div οnmοuseοver="changeMc(5,5)" οnmοuseοut="hi()" class="index_yp_main">综合(循环周期(1秒))</div>
  </div>
  <!--end-->
</div>
<script language="javascript" type="text/javascript">
<!--
var s=5;
var t=1000;//循环周期(1秒)
var timer;
function changeMc(x,y){
// x是当前显示的层 y是即将显示的层
 clearTimeout(timer);
 if (x!=y){
 document.getElementById('yp_card'+x).style.display = "none";
 document.getElementById('yp_card'+y).style.display = "block";
 s=y
 }
}
function hi(){
timer=setTimeout("sh()",t)
}
function sh(){
	s=(s>=5)?1:s+1
	for (var i=1;i<=5;i++){
		document.getElementById("yp_card"+i).style.display = "none";
	}
	document.getElementById("yp_card"+s).style.display = "block"
	timer=setTimeout("sh()",t)
}
sh()
 -->
</script>
</body>
</html>

 

 

横向、竖向排列的多种选项卡及滑动门

 

多种选项卡菜单，横向、竖向排列，有滑动门，也有需要点击才激活的滑动门（大家常说的选项卡），想用哪个你就用哪个，这里只是一种实现方法，选项卡色调什么的请根据您自己的网站风格修改下。 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选项卡-www.codefans.net</title>
<style type="text/css">
<!--
* {
	margin:0;
	padding:0;
	font-size:12px;
	font-weight:normal;
}
.jj {
	font-weight:bolder!important;
}
.box {
	border-top-color:#c00!important;
}
.pr {
	color:#060!important;
}
#tab01 {
	position:relative;
	width:336px;
	height:88px;
	padding-top:15px;
	margin:50px;
	overflow:hidden;
}
#tab01 h3 {
	position:relative;
	z-index:2;
	float:left;
	height:14px;
	padding:0 7px 0 8px;
	margin-left:-1px;
	border-left:solid 1px #ccc;
	border-right:solid 1px #fff;
	text-align:center;
	background:#fff;
	cursor:pointer;
}
/*/*/
#tab01 h3.up {
	height:18px;
	padding:5px 7px 0 7px;
	margin:-6px 0 0 0;
	border:solid #ccc;
	border-width:1px 1px 0;
	color:#c00;
}
#tab01 div {
	display:none;
	position:absolute;
	left:0;
	top:32px;
	z-index:1;
	width:324px;
	height:54px;
	padding:5px;
	border:solid 1px #ccc;
	color:#666;
}
#tab01 div.up {
	display:block;
}
#tab02 {
	position:relative;
	width:200px;
	margin:50px;
	border:solid #ccc;
	border-width:0 1px 1px;
}
/*/*/
#tab02 h4 {
	height:18px;
	line-height:18px;
	border:solid #ccc;
	border-width:1px 0;
	margin-bottom:-1px;
	text-align:center;
	background:#f6f6f6;
	cursor:pointer;
}
#tab02 h4.up {
	color:#c00;
}
#tab02 ol {
	display:none;
	height:54px;
	padding:5px;
	color:#666;
}
#tab02 ol.up {
	display:block;
}
#tab03 {
	position:relative;
	width:100px;
	margin:50px;
}
#tab03 h3 {
	position:relative;
	z-index:1;
	height:16px;
	padding-top:4px;
	margin-bottom:-1px;
	border:solid #ccc;
	border-width:1px 0 1px 1px;
	text-align:center;
	font-family:宋体;
	background:#eee;
	cursor:pointer;
}
#tab03 h3.up {
	z-index:3;
	color:#c00;
	background:#fff;
}
#tab03 div.tab {
	display:none;
	position:absolute;
	left:99px;
	top:0;
	z-index:2;
	width:300px;
	height:200px;
	padding:5px;
	border:solid 1px #ccc;
	color:#666;
}
#tab03 div.tab.up {
	display:block;
}
-->
</style>
</head>
<body>
<div id="tab01">
  <h3>我的首页</h3>
  <div class="jj">
    <p>我的首页，放我自己的东西哦！</p>
  </div>
  <h3 class="pr">日记</h3>
  <div>
    <p>我自己写的日记。</p>
  </div>
  <h3>音乐</h3>
  <div>
    <p>我喜欢听的音乐哦！</p>
  </div>
  <h3 class="box">回家</h3>
  <div>
    <p>我想回家！</p>
  </div>
</div>
<div id="tab02">
  <h4>源码下载</h4>
  <ol class="pr">
    <li>源码下载请到源码爱好者</li>
  </ol>
  <h4 class="box">网页特效</h4>
  <ol>
    <li>网页特效</li>
  </ol>
  <h4>可爱</h4>
  <ol>
    <li>可爱的人是谁呀？</li>
  </ol>
  <h4 class="bb">笑话</h4>
  <ol>
    <li>讲个笑话听听吧？</li>
  </ol>
</div>
<div id="tab03">
  <h3>源码首页</h3>
  <div class="tab">
    <p>源码爱好者是最好的源码下载站</p>
  </div>
  <h3>中国</h3>
  <div class="tab wushi">
    <p>中国是世界面积大的国家</p>
  </div>
  <h3>河南</h3>
  <div class="tab">
    <p>河南是中国人口最多的省份</p>
  </div>
  <h3 class="box">江苏</h3>
  <div class="tab tab123">
    <p>江苏江苏，我爱你。</p>
  </div>
</div>
</div>
<script type="text/javascript">
<!--
function Pid(id,tag){
	if(!tag){
		return document.getElementById(id);
		}
	else{
		return document.getElementById(id).getElementsByTagName(tag);
		}
}
function tab(id,hx,box,iClass,s,pr){
	var hxs=Pid(id,hx);
	var boxs=Pid(id,box);
	if(!iClass){ 
		boxsClass=boxs; 
	}
	else{
		var boxsClass = [];
		for(i=0;i<boxs.length;i++){
			if(boxs[i].className.match(/\btab\b/)){
				boxsClass.push(boxs[i]);
			}
		}
	}
	if(!pr){
		go_to(0);
		yy();
	}
	else {
		go_to(pr);
		yy();
	}
	function yy(){
		for(var i=0;i<hxs.length;i++){
			hxs[i].temp=i;
			if(!s){
				s="onmouseover"; 
				hxs[i][s]=function(){
					go_to(this.temp);
				}
			}
			else{
				hxs[i][s]=function(){
					go_to(this.temp);
				}
			}
		}
	}
	function go_to(pr){
		for(var i=0;i<hxs.length;i++){
			if(!hxs[i].tmpClass){
				hxs[i].tmpClass=hxs[i].className+=" pr1984_com";
				boxsClass[i].tmpClass=boxsClass[i].className+=" pr1984_com";
			}
			if(pr==i){
				hxs[i].className+=" up"; 
				boxsClass[i].className+=" up"; 
			}
			else {
				hxs[i].className=hxs[i].tmpClass;
				boxsClass[i].className=boxsClass[i].tmpClass;
			}
		}
	}
}

tab("tab01","h3","div","","onclick",2); 
tab("tab02","h4","ol"); 
tab("tab03","h3","div","tab"); 
//-->
</script>
</body>
</html>

 

CSS+JSS滚动切换的选项卡【荐】

多种选项卡菜单，横向、竖向排列，有滑动门，也有需要点击才激活的滑动门（大家常说的选项卡），想用哪个你就用哪个，这里只是一种实现方法，选项卡色调什么的请根据您自己的网站风格修改下。

 

 

<!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>可以滚动切换的选项卡-codefans.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<STYLE>
* {
	margin:0;
	padding:0;
	font-size:12px;
}
img {
	border:none;
}
ul, ol {
	list-style:none;
}
#content {
	margin:20px auto;
	border:1px solid #a5b5c0;
	width:188px;
	height:241px;
	background:url(http://jhxk.iteye.com/upload/attachment/136425/2d148614-7de0-3640-a495-8e068396b144.gif);
	overflow:hidden;
}
#title {
	height:17px;
*height:16px;
	background:url(http://jhxk.iteye.com/upload/attachment/136431/ae374a90-8a61-382c-b701-5051659ab449.gif) repeat-x;
	border-bottom:1px solid #a5b5c0;
	padding:3px 0 0 6px;
*padding:4px 0 0 6px;
	font-weight:700;
}
#title li {
	float:left;
	display:inline;
	width:92px;
}
#tit_l {
	float:left;
	width:92px;
	overflow:hidden;
	height:14px;
}
#tit_r {
	float:right;
	margin-top:-1px;
*margin-top:-2px;
}
#tit_r img {
	margin-right:4px;
	cursor:pointer;
}
#tit_r img:hover {
	filter: Alpha(Opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}
#text {
	clear:both;
	height:210px;
}
#text ul {
	background:url(http://jhxk.iteye.com/upload/attachment/136427/88d4c3da-0cdb-3777-9e98-7bbd52318074.gif) no-repeat 12px 4px;
	margin:6px 0;
}
#text li {
	padding-left:34px;
	line-height:21px;
}
#text li a {
	color:#123b8d;
	text-decoration:none;
}
#text li a:hover {
	text-decoration:underline;
}
</STYLE>
</head>
<body>
<DIV id=content>
  <DIV id=title>
    <DIV id=tit_l>
      <DIV id=mytit>
        <UL>
          <LI>最新更新 </LI>
          <LI>下载排行 </LI>
          <LI>最受关注 </LI>
        </UL>
      </DIV>
    </DIV>
    <DIV id=tit_r><IMG alt="" src="http://jhxk.iteye.com/upload/attachment/136429/dc248a7e-8b23-3099-8ebd-548973c5e8fb.gif"><IMG alt="" src="http://jhxk.iteye.com/upload/attachment/136433/5c77ef30-13ff-3a75-9253-42fe213b04a8.gif"></DIV>
  </DIV>
  <DIV id=text>
    <UL id=c1>
      <li><a href="/soft/1160.shtml" target="_blank">VC++实现超酷QQ界面</a></li>
      <li><a href="/soft/3477.shtml" target="_blank">基于C#同步套接字</a></li>
      <li><a href="/soft/4067.shtml" target="_blank">《网页制作完全手册》 chm</a></li>
      <li><a href="/soft/2144.shtml" target="_blank">VB调用模板进行打印的实例</a></li>
      <li><a href="/soft/1183.shtml" target="_blank">ASP.net报表设计源码包</a></li>
      <li><a href="/soft/1610.shtml" target="_blank">J2me开发环境的搭建教程</a></li>
      <li><a href="/soft/3182.shtml" target="_blank">《jQuery in Action》 源代码</a></li>
      <li><a href="/soft/3307.shtml" target="_blank">DCS PHP在线记账/记事本</a></li>
      <li><a href="/soft/2832.shtml" target="_blank">VB打印控件Listview示例</a></li>
      <li><a href="/soft/4321.shtml" target="_blank">仿支付宝CSS网站导航栏</a></li>
    </UL>
    <UL id=c2>
      <li><a href="http://codefans.net/soft/4387.shtml" target="_blank">BICQ 仿QQ聊天系统</a></li>
      <li><a href="http://codefans.net/soft/3389.shtml" target="_blank">DIV+JS弹出窗口框架</a></li>
      <li><a href="http://codefans.net/soft/4383.shtml" target="_blank">WindowLite  可拖动提示窗口</a></li>
      <li><a href="http://codefans.net/soft/4381.shtml" target="_blank">Asp生成静态完整实例</a></li>
      <li><a href="http://codefans.net/soft/4380.shtml" target="_blank">VC++固定资产管理系统</a></li>
      <li><a href="http://codefans.net/soft/4376.shtml" target="_blank">jQuery相册播放插件</a></li>
      <li><a href="http://codefans.net/soft/4374.shtml" target="_blank">Ajax拖动分页插件</a></li>
      <li><a href="http://codefans.net/soft/4373.shtml" target="_blank">C#餐饮管理系统</a></li>
      <li><a href="http://codefans.net/soft/4387.shtml" target="_blank">BICQ 仿QQ聊天系统</a></li>
      <li><a href="http://codefans.net/soft/4387.shtml" target="_blank">BICQ 仿QQ聊天系统</a></li>
    </UL>
    <UL id=c3>
      <li><a href="/soft/1160.shtml" target="_blank">VC++实现超酷QQ界面</a></li>
      <li><a href="/soft/3477.shtml" target="_blank">基于C#同步套接字</a></li>
      <li><a href="/soft/4067.shtml" target="_blank">《网页制作完全手册》 chm</a></li>
      <li><a href="/soft/2144.shtml" target="_blank">VB调用模板进行打印的实例</a></li>
      <li><a href="/soft/1183.shtml" target="_blank">ASP.net报表设计源码包</a></li>
      <li><a href="/soft/1610.shtml" target="_blank">J2me开发环境的搭建教程</a></li>
      <li><a href="/soft/3182.shtml" target="_blank">《jQuery in Action》 源代码</a></li>
      <li><a href="/soft/3307.shtml" target="_blank">DCS PHP在线记账/记事本</a></li>
      <li><a href="/soft/2832.shtml" target="_blank">VB打印控件Listview示例</a></li>
      <li><a href="/soft/4321.shtml" target="_blank">仿支付宝CSS网站导航栏</a></li>
    </UL>
  </DIV>
</DIV>
<SCRIPT type=text/javascript> 
/** /**/ 
var myTitle = document.getElementById("mytit"); 
myTitle.innerHTML += myTitle.innerHTML; 
var lists = myTitle.getElementsByTagName("li"); 
var num = lists.length - 2; 
//alert(num) 
myTitle.style.width = (num+1) * 92;//计算标题长度 
var ele = document.getElementById("tit_l"); 
var w = ele.clientWidth; 
var n = 18; 
var t = 38;//数值越小速度越快 
var times = new Array(n); 
var k = 0; 
var l = 0; 
yahooo(0); 
function yahooo(s) 
{ 
if(k >= num && s > 0) 
{ 
ele.scrollLeft = w; 
k = 1; 
} 
if(k < 1 && s < 0) 
{ 
ele.scrollLeft = (num-1) * w; 
k = num-1; 
} 
k += s; 
var x = ele.scrollLeft; 
var d = k * w - x; 
for(i=0;i<n;i++) 
( 
function() 
{ 
if(times[i]) {clearTimeout(times[i])} ; 
var j = i; 
times[i] = setTimeout(function(){ele.scrollLeft=x+Math.round(d*Math.sin(Math.PI*(j+1)/(2*n)));},(i+1)*t); 
} 
)(); 
} 
var imgs = document.getElementById("tit_r").getElementsByTagName("img"); 
///
var c1 = document.getElementById("c1"); 
var c2 = document.getElementById("c2"); 
var c3 = document.getElementById("c3"); 
imgs[0].onclick = function() 
{ 
yahooo(-1); 
if(k==0){c1.style.display = "block";c2.style.display = "none";c3.style.display = "none";} 
if(k==1){c1.style.display = "none";c2.style.display = "block";c3.style.display = "none";} 
if(k==2){c1.style.display = "none";c2.style.display = "none";c3.style.display = "block";} 
} 
imgs[1].onclick = function() 
{ 
yahooo(1); 
if(k==0 || k==3){c1.style.display = "block";c2.style.display = "none";c3.style.display = "none";} 
if(k==1 || k==4){c1.style.display = "none";c2.style.display = "block";c3.style.display = "none";} 
if(k==2){c1.style.display = "none";c2.style.display = "none";c3.style.display = "block";} 
} 
</SCRIPT>
</body>
</html>

 

列表、排行专用的灰、红滑动门菜单

专用于列表、排行的红灰色调的网页滑动门，灰色、红色的颜色搭配，视觉舒服。直接复制到你的网页中就可以用，非常方便。 
<!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>滑动门-www.codefans.net</title>
<script type="text/javascript">
</script>
<style type="text/css">
/* www.codefans.net */
* {
	margin:0;
	padding:0;
	word-break:break-all;
}
body {
	background:#FFF;
	color:#333;
	font:12px/1.6em Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
	font-size:1em;
}
a {
	color:#333;
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}
ul, li {
	list-style:none;
}
fieldset, img {
	border:none;
}
/* Hotnews style */
#hotnews {
	width:300px;
	margin:100px;
}
#hotnews_caption {
	width:300px;
	overflow:hidden;
	border-bottom:3px solid #C2130E;
}
#hotnews_caption ul {
	float:right;
}
#hotnews_caption ul li {
	float:left;
	border-left:1px solid #FFF;
	width:50px;
	line-height:25px;
	text-align:center;
	cursor:pointer;
}
#hotnews_caption .normal {
	background:#CCC;
}
#hotnews_caption .current {
	background:#C2130E;
	color:#FFF;
}
#hotnews_content {
}
#hotnews_content .normal {
	display:none;
}
#hotnews_content .current {
	display:block;
}
#hotnews_content ul {
	padding:8px 0 0 5px;
}
#hotnews_content ul li a {
	font-size:14px;
}
</style>
<script type="text/javascript">
function secBoard(elementID,listName,n) {
 var elem = document.getElementById(elementID);
 var elemlist = elem.getElementsByTagName("li");
 for (var i=0; i<elemlist.length; i++) {
  elemlist[i].className = "normal";
  var m = i+1;
  document.getElementById(listName+"_"+m).className = "normal";
 }
  elemlist[n-1].className = "current";
  document.getElementById(listName+"_"+n).className = "current";
}
</script>
</head>
<body>
<div id="hotnews">
  <div id="hotnews_caption">
    <ul>
      <li class="current" οnmοusemοve="secBoard('hotnews_caption','list',1);">首页</li>
      <li class="normal" οnmοusemοve="secBoard('hotnews_caption','list',2);">排行</li>
      <li class="normal" οnmοusemοve="secBoard('hotnews_caption','list',3);">最新</li>
      <li class="normal" οnmοusemοve="secBoard('hotnews_caption','list',4);">热点</li>
    </ul>
  </div>
  <div id="hotnews_content">
    <div class="current" id="list_1">
      <ul>
        <li><a href="/soft/4489.shtml" target="_blank">淘特 AspCms v5.5 SP1</a></li>
        <li><a href="/soft/3091.shtml" target="_blank">C9 ASP静态文章系统 v2.0.1</a></li>
        <li><a href="/soft/3582.shtml" target="_blank">TacodEmp ASP企业网站系统 v1.3</a></li>
      </ul>
    </div>
    <div class="normal" id="list_2">
      <ul>
        <li><a href="/soft/4626.shtml" target="_blank">良精公司企业网站系统ASP开源版 v1.0</a></li>
        <li><a href="/soft/2605.shtml" target="_blank">露珠ASP个人站程序 v3.21</a></li>
        <li><a href="/soft/3158.shtml" target="_blank">最新ACCESS版纯真IP数据库附ASP查询程序</a></li>
        </a>
        </li>
      </ul>
    </div>
    <div class="normal" id="list_3">
      <ul>
        <li><a href="/soft/2221.shtml" target="_blank">愚人笔记ASP文章动态版 V4.0</a></li>
        <li><a href="/soft/3368.shtml" target="_blank">QvodCMS视频点播专家 ASP v2.2</a></li>
        <li><a href="/soft/2482.shtml" target="_blank">雷风HTML影视系统ASP版带采集 v1.1</a></li>
      </ul>
    </div>
    <div class="normal" id="list_4">
      <ul>
        <li><a href="/soft/1037.shtml" target="_blank">网趣ASP购物系统时尚版 v9.2</a></li>
        <li><a href="/soft/4548.shtml" target="_blank">QJblog ASP版多用户博客 v1.0</a></li>
        <li><a href="/soft/2141.shtml" target="_blank">Pcook CMS 泡客静态文章系统（带采集） v3.0</a></li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>

 

jhlovett
关注
专栏目录
JavaScript之tab栏切换
weixin_44827643的博客
06-27 7596
本文主要介绍如何通过JS实现tab栏的切换效果，主要介绍三种方式：1.利用自定义属性；2.利用let关键字；3.利用事件对象1.利用自定义属性此种方法的核心在于给每个tab选项设置一个自定义属性值，然后根据相应的属性值找到对应的内容选项进行显示。代码如下： 2.利用let关键词此种方法相较于第一种更加简单，利用let提供的块作用域特点，直接利用各个选项的索引值即可获取相应的内容进行显示。代码如下： 3.利用事件对象。前两种方法所做出来的tab栏是单一的，若要进行代码的复用，则会出现问题。利用事件对象
JavaScript对tab栏切换的常用几种方法
weixin_61683893的博客
04-11 3823
【代码】JavaScript对tab栏切换的常用几种方法。
使用JS实现tab栏切换
Liuzhengyue_的博客
09-18 327
直接调用函数，其实相当于是 window.函数，所以 this 指代 window。函数的调用方式不同，this 指代的对象也不同。是判断 this 指向的粗略规则。【谁调用， this 就是谁】指的是函数内部特殊的。
JS实现tab栏切换效果
loveforlongtime的博客
03-22 7862
js实现tab栏（前端必会）
js实现tab栏切换
m0_56713342的博客
11-17 680
我们可以利用事件委托来实现，就是给他们共同的祖先元素绑定事件，其子元素触发的事件就会冒泡到祖先元素，可以提高代码的执行效率，对于其对应内容的显示，在其添加active类时，给每张图片所在的块添加data-id 的属性，在添加类时用e.target.dataset.id作为索引值来添加。点击时，先清除active类，点击谁，谁就添加active类，对应的图片显示，其他隐藏。由于要添加点击事件的元素有很多，这样需要给每个元素都添加点击事件，比较麻烦。需要点击谁，就先获取谁，获得的是一个伪数组。
JS——利用JS实现 tab 切换详解
Bonsoir777的博客
08-27 3564
本文主要介绍如何利用 js 实现tab栏的切换效果
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
11-24
在本文中，我们将探讨如何使用JavaScript（JS）来创建一个图文并茂的选项卡效果。这个功能常用于网站设计，可以有效地组织和展示内容，提高用户体验。以下是一个基本的实现步骤，结合提供的代码示例进行解释： 1. *...
jQuery简单实现tab选项卡切换效果
10-22
本文示例利用了jQuery的选择器和DOM操作功能，实现了Tab选项卡切换效果。 2. **Tab选项卡概念** Tab选项卡是用户界面中常见的组件，它允许用户通过点击不同的标签（tab），在不同内容区域之间切换。这种设计减少...
JavaScript案例——04tab选项卡功能
weixin_44364634的博客
01-17 182
JavaScript案例——04tab选项卡功能
JS自定义选项卡函数及用法实例分析
10-23
选项卡函数的调用方法在示例中已经给出，通过指定标签页和内容区域的元素集合、触发事件类型以及默认显示的索引值来实现。此函数可以适用于多种需要实现标签页切换的场景。 7. 在实际项目中如何美化和优化选项卡...
jsTab栏制作选项卡
新生代农民工
09-27 595
案例分析 1、Tab栏切换有2个大的模块 2、上的模块选项卡，点某一个，当前这一个底色会变，其他不变（排他思想）修改类名的方法， 3、下面的模块内容，会跟随上面的选项卡变化。所以下面的模块写到点击事件里。 4、规律：下面的模块显示内容和上面的选项卡一一对应，相匹配。 5、核心思路：给上面的模块里面的所有元素添加自定义属性属性值从0开始。 6、当我们点击上面模块的某一个li，让下面模块对应序号的内容显示，其他隐藏（排他）。 <!DOCTYPE html> <html lang="en"&.
js:tab切换（4种方法 大全 代码）
weixin_59519449的博客
10-07 647
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box { display: flex; } .left>div { width: 200px; height: 100px; line-height: 100px;.
javascript实现tab切换的方法（2）
weixin_30807677的博客
03-16 564
方法三：显示和隐藏通过是有拥有class控制，先把所有的内容隐藏dispaly设为none，而该class的display设置为block，遍历所有标题节点和内容节点，点击标题后，该标题节点和对用的内容节点拥有class，其他的没有。 <html> <head> <meta http-equiv="Content-Type" content="...
前端-js例子：tab切换
最新发布
m0_75163045的博客
09-18 426
1>外边框*{padding: 0;margin: 0;2>修改内容样式 （让第一个li展示）width: 30%;3.js实现样式变化i++){// 初始化头部的index属性// 绑定事件// 事件触发后标题部分样式有变化+j++){// 内容部分变化k++){}else{
使用JavaScript实现Tab和左右切换功能
syntax_api860的博客
10-05 291
在Web开发中，经常会遇到需要使用标签页（Tab）来切换内容或者左右切换功能。本文将介绍如何使用JavaScript编写代码实现这些功能。
js实现TAB切换对应不同颜色的代码
10-23
当点击事件被触发时，会执行一个函数（在示例代码中，该函数名被截断），这个函数负责更新内容区域的显示以及选项卡的样式。 4. 事件处理函数：事件处理函数中包含了切换颜色的主要逻辑。它会首先清除当前所有选项...
js选项卡html的实例集合
09-29
js选项卡html，自己做的选项卡功能值得参考，有的从网上找到的~~~~~~~~
JavaScript tab选项卡切换
猿码互联
05-29 609
函数来处理选项卡按钮的点击事件。函数首先隐藏了所有选项卡内容，然后显示当前选项卡的内容。同时，它还在当前选项卡按钮上添加了一个。下面是一个简单的JavaScript代码示例，展示如何使用tab选项卡来切换内容。此示例中，我们使用了一个。
JS tab栏切换
每天一个前端小知识~
08-28 5025
问题： 当我们点击下面相应的选项时，选项背景颜色和内容会跟随变化 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>tab切换</title> <style> * { margin: 0; padding: 0; } li { list-style-type: none; }
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值