tab选项卡前后有向前和向后按钮，点击实现上一个下一个

最新推荐文章于 2025-08-04 20:59:31 发布

weixin_33850890

最新推荐文章于 2025-08-04 20:59:31 发布

阅读量892

点赞数

CC 4.0 BY-SA版权

文章标签： javascript c# 开发工具 ViewUI

原文链接：https://my.oschina.net/wallie/blog/127982

本文介绍了一个简单的选项卡切换效果实现方案，使用HTML和JavaScript完成页面布局及交互逻辑，通过点击左右箭头实现选项卡的前后切换，并展示了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现功能：（选项卡）选项卡前后有一个向前、向后的点击功能，点左边的向前移一个，点右边的向后移一个。

<!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>Demo</title>
<style>
body {background:#f3f3f4;}
body{margin:0;padding:0;font-size:12px;line-height:20px;color:#4f4f4f;font-family:"Verdana","宋体";}
h1,h2,h3,h4,h5,h6,form,div,ul,ol,dl,dt,dd,p,i,li,big,small,em,i,input,select,textarea,td,th{margin:0;padding:0;}
div {margin:0 auto;}
a,img{border:none;}
img {vertical-align:middle;}
em,i {font-style:normal;}
ul,ol {list-style:none;}

#warpper {border:#dfdfdf 1px solid;padding:10px;width:928px;margin:10px auto;background:#fff;}

/*title_tab ul宽880px,10个li,平均76+12=88*/
.title_tab {border-bottom:#dedede 1px solid;margin:0 -10px 5px;height:30px;}
.title_tab span {width:22px;height:22px;display:inline-block;background-repeat:no-repeat;cursor:pointer;}
.title_tab .prev {background-position:0 -959px;float:left;margin:3px 3px 0 8px}
.title_tab .next {background-position:0 -981px;float:right;margin:3px 8px 0 0}
.title_tab ul {font-family:"微软雅黑","黑体","Arial";color:#2E4D7C;float:left;width:880px;height:30px;}
.title_tab ul li {float:left;position:relative;top:1px;background:#f3f3f4;border:#dedede 1px solid;width:74px;text-align:center;line-height:28px;margin:0 6px;cursor:pointer;}
.title_tab ul li.current {background:#fff;border-bottom:#fff 1px solid;border-left:#dedede 1px solid;border-right:#dedede 1px solid;border-top:#dedede 1px solid;}

.tab_content {display:none;}
.tab_content.current {display:block;}
</style>
</head>

<body>
<div id="warpper">
  <div id="tab_candidates">
    <div class="title_tab" id="title_tab">
      <span class="prev" onclick="tabPrev()">左</span>
      <ul class="clearfix">
        <li onclick="tab('candidates',0)" class="current">名字一</li>
        <li onclick="tab('candidates',1)">名字二</li>
        <li onclick="tab('candidates',2)">名字三</li>
        <li onclick="tab('candidates',3)">名字四</li>
        <li onclick="tab('candidates',4)">名字五</li>
        <li onclick="tab('candidates',5)">名字六</li>
        <li onclick="tab('candidates',6)">名字七</li>
        <li onclick="tab('candidates',7)">名字八</li>
        <li onclick="tab('candidates',8)">名字九</li>
        <li onclick="tab('candidates',9)">名字十</li>
      </ul>
      <span class="next" onclick="tabNext()">右</span>
    </div>
    <div id="candidates_0" class="tab_content current" style="height:400px;">111111111</div>
    <div id="candidates_1" class="tab_content" style="height:400px;">222222222</div>
    <div id="candidates_2" class="tab_content" style="height:400px;">333333333</div>
    <div id="candidates_3" class="tab_content" style="height:400px;">4444444444</div>
    <div id="candidates_4" class="tab_content" style="height:400px;">555555555</div>
    <div id="candidates_5" class="tab_content" style="height:400px;">66666666</div>
    <div id="candidates_6" class="tab_content" style="height:400px;">7777777777</div>
    <div id="candidates_7" class="tab_content" style="height:400px;">888888888</div>
    <div id="candidates_8" class="tab_content" style="height:400px;">999999999</div>
    <div id="candidates_9" class="tab_content" style="height:400px;">101010101010</div>
  </div>
</div>
</body>
</html>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript">
var otabLis=document.getElementById("title_tab").getElementsByTagName("li");
var index = 0;

function tab(obj,id){
	var m=$("#tab_"+obj+" li");
	m.removeClass("current");
	m.eq(id).addClass("current");
	var c=$("#tab_"+obj+" .tab_content");
	c.removeClass("current");
	c.eq(id).addClass("current");
	for(var i=0;i<otabLis.length;i++){
		if(otabLis[i].className=="current"){
			index = i;
		}
	}
}

function tabNext(){
	index++;
	if(index>=otabLis.length){
		index=0;
	}
	for(var i=0;i<otabLis.length;i++){
		otabLis.item(i).className="";
		otabLis.item(index).className="current";
		tab('candidates',index);
	}
}

function tabPrev(){
	index --;
	if(index<0){
		index=otabLis.length-1;
	}
	alert(index);
	for(var i=0;i<otabLis.length;i++){
		otabLis.item(i).className="";
		otabLis.item(index).className="current";
		tab('candidates',index);
	}
}
</script>

转载于:https://my.oschina.net/wallie/blog/127982