<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery tab选项卡插件</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
*{ margin:0; padding:0;}
body { font:12px/1.8 Arial; color:#666;}
ul,li{ list-style:none;}
.tab{ width:450px; margin:0 auto 50px;}
.tab-hd { background:#F93; overflow:hidden; zoom:1;}
.tab-hd li{ float:left; width:150px; color:#fff; text-align:center; cursor:pointer;}
.tab-hd li.active{ background:#F60;}
.tab-bd li{display:none; padding:20px; border:1px solid #ddd; border-top:0 none; font-size:24px;}
</style>
</head>
<body>
<script type="text/javascript">
$(function () {
function tabs(tabTit, on, tabCon) {
$(tabCon).each(function () {
$(this).children().eq(0).show();
});
$(tabTit).each(function () {
$(this).children().eq(0).addClass(on);
});
$(tabTit).children().hover(function () {//鼠标“hover”的效果
$(this).addClass(on).siblings().removeClass(on);
var index = $(tabTit).children().index(this);
$(tabCon).children().eq(index).show().siblings().hide();
});
}
tabs(".tab-hd", "active", ".tab-bd");
tabs(".tab-hd3", "active", ".tab-bd3");
});
</script>
<script type="text/javascript">
$(function () {
function tabs(tabTit, on, tabCon) {
$(tabCon).each(function () {
$(this).children().eq(0).show();
});
$(tabTit).each(function () {
$(this).children().eq(0).addClass(on);
});
$(tabTit).children().click(function () {//鼠标“click”的效果
$(this).addClass(on).siblings().removeClass(on);
var index = $(tabTit).children().index(this);
$(tabCon).children().eq(index).show().siblings().hide();
});
}
tabs(".tab-hd2", "active", ".tab-bd2");
});
</script>
<div class="tab">
<ul class="tab-hd">
<li>选项1</li><li>选项2</li><li>选项3</li></ul>
<ul class="tab-bd">
<li>内容1</li><li>内容2</li><li>内容3</li></ul>
</div>
<style type="text/css">
.tab3{ width:450px; margin:0 auto 50px;}
.tab-hd3 { background:#F93; overflow:hidden; zoom:1;}
.tab-hd3 li{ float:left; width:150px; color:#fff; text-align:center; cursor:pointer;}
.tab-hd3 li.active{ background:#F60;}
.tab-bd3 li{display:none; padding:20px; border:1px solid #ddd; border-top:0 none; font-size:24px;}
</style>
<div class="tab3">
<ul class="tab-hd3">
<li>选项4</li><li>选项5</li><li>选项6</li></ul>
<ul class="tab-bd3">
<li>内容4</li><li>内容5</li><li>内容6</li></ul>
</div>
<style>
.tab2{ width:450px; margin:0 auto 50px;}
.tab-hd2 { background:#F93; overflow:hidden; zoom:1;}
.tab-hd2 li{ float:left; width:150px; color:#fff; text-align:center; cursor:pointer;}
.tab-hd2 li.active{ background:#F60;}
.tab-bd2 li{display:none; padding:20px; border:1px solid #ddd; border-top:0 none; font-size:24px;}
</style>
<div class="tab2">
<ul class="tab-hd2">
<li>点击效果1</li><li>选项2</li><li>选项3</li></ul>
<ul class="tab-bd2">
<li>内容1</li><li>内容2</li><li>内容3</li></ul>
</div>
<hr />
<h1>
Tab选项卡标签,自动切换
</h1>
<style type="text/css">
*{margin: 0;padding: 0;}
.dl_all{margin: 10px auto;width: 500px;line-height: 24px; border-left: 1px solid #dcdcdc; }
.dt_nav{padding: 0 10px;float: left;border: 1px solid #dcdcdc;border-left: 0;cursor: pointer;margin-bottom: -1px;}
.dt_nav.active{border-bottom: 1px solid #fff;}
.navcon{clear: both;width: 100%;border-left: 0;border: 1px solid #dcdcdc;border-left: 0;display: none;}
</style>
<script type="text/javascript">
$(document).ready(function () {
$('.nav:first').addClass('active');
$('.navcon:first').css('display', 'block');
autoroll();
hookThumb();
});
var i = -1; //第i+1个tab开始
var offset = 3000; //轮换时间
var timer = null;
function autoroll() {
n = $('.dt_nav').length - 1;
i++;
if (i > n) {
i = 0;
}
slide(i);
timer = window.setTimeout(autoroll, offset);
}
function slide(i) {
$('.dt_nav').eq(i).addClass('active').siblings().removeClass('active');
$('.navcon').eq(i).css('display', 'block').siblings('.navcon').css('display', 'none');
}
function hookThumb() {
$('.dt_nav').hover(function () {//鼠标事件,可换成“click”
if (timer) {
clearTimeout(timer);
i = $(this).prevAll().length;
slide(i);
}
},
function () {
timer = window.setTimeout(autoroll, offset);
this.blur();
return false;
});
}
</script>
<dl class="dl_all">
<dt class="dt_nav">
nav1
</dt>
<dt class="dt_nav">
nav2
</dt>
<dt class="dt_nav">
nav3
</dt>
<dd class="navcon">
内容1
</dd>
<dd class="navcon">
内容2
</dd>
<dd class="navcon">
内容3
</dd>
</dl>
</body>
</html> 提示:你可以先修改部分代码再运行。 常用tab切换-原生js代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>常用tab切换</title>
<style type="text/css">
#box{width:500px;font-size:12px}
#box ul{margin:0;padding:0;list-style:none}
#box #tab{height:25px;padding-left:10px;border-bottom:1px solid #AACBEE}
#box #tab li{width:80px;height:18px;padding-top:7px;margin-right:10px;text-align:center;float:left;background:#F3F8FD;cursor:pointer}
#box #tab li.on{width:78px;height:19px;padding-top:5px;border:1px solid #AACBEE;border-bottom:none;color:#00f;background:#E8F2F7;position:relative;top:1px}
#box #tab_con{border:1px solid #AACBEE;border-top:none;padding:20px}
#box #tab_con li{display:none}
#box #tab_con #tab_con_1{display:block;}
</style>
</head>
<body>
/*********1**********/
<div id="box">
<ul id="tab">
<li class="on" id="tab_1" onclick="switchTab(1)">新闻</li>
<li id="tab_2" onclick="switchTab(2)">财经</li>
<li id="tab_3" onclick="switchTab(3)">娱乐</li>
<li id="tab_4" onclick="switchTab(4)">娱乐</li>
</ul>
<ul id="tab_con">
<li id="tab_con_1">新闻内容</li>
<li id="tab_con_2">财经内容</li>
<li id="tab_con_3">娱乐内容</li>
<li id="tab_con_4">娱乐内容3</li>
</ul>
</div>
<script type="text/javascript">
function switchTab(n){
for(var i = 1; i <= 4; i++){
document.getElementById("tab_" + i).className = "";
document.getElementById("tab_con_" + i).style.display = "none";
}
document.getElementById("tab_" + n).className = "on";
document.getElementById("tab_con_" + n).style.display = "block";
}
</script>
/*********2**********/
<style type="text/css">
#boxa{width:500px;font-size:12px}
#boxa ul{margin:0;padding:0;list-style:none}
#boxa #taba{height:25px;padding-left:10px;border-bottom:1px solid #AACBEE}
#boxa #taba li{width:80px;height:18px;padding-top:7px;margin-right:10px;text-align:center;float:left;background:#F3F8FD;cursor:pointer}
#boxa #taba li.on{width:78px;height:19px;padding-top:5px;border:1px solid #AACBEE;border-bottom:none;color:#00f;background:#E8F2F7;position:relative;top:1px}
#boxa #tab_cona{border:1px solid #AACBEE;border-top:none;padding:20px}
#boxa #tab_cona li{display:none}
#boxa #tab_cona #tab_cona_1{display:block;}
</style>
<div id="boxa">
<ul id="taba">
<li class="on" id="taba_1" onmouseover="switchTaba(1)">新闻</li>
<li id="taba_2" onmouseover="switchTaba(2)">财经</li>
<li id="taba_3" onmouseover="switchTaba(3)">娱乐</li>
<li id="taba_4" onmouseover="switchTaba(4)">娱乐</li>
</ul>
<ul id="tab_cona">
<li id="tab_cona_1">新闻内容</li>
<li id="tab_cona_2">财经内容</li>
<li id="tab_cona_3">娱乐内容</li>
<li id="tab_cona_4">娱乐内容3</li>
</ul>
</div>
<script type="text/javascript">
function switchTaba(n){
for(var i = 1; i <= 4; i++){
document.getElementById("taba_" + i).className = "";
document.getElementById("tab_cona_" + i).style.display = "none";
}
document.getElementById("taba_" + n).className = "on";
document.getElementById("tab_cona_" + n).style.display = "block";
}
</script>
/*********3**********/
<style type="text/css">
#boxy{width:500px;font-size:12px}
#boxy ul{margin:0;padding:0;list-style:none}
#boxy #taby{height:25px;padding-left:10px;border-bottom:1px solid #AACBEE}
#boxy #taby li{width:80px;height:18px;padding-top:7px;margin-right:10px;text-align:center;float:left;background:#F3F8FD;cursor:pointer}
#boxy #taby li.on{width:78px;height:19px;padding-top:5px;border:1px solid #AACBEE;border-bottom:none;color:#00f;background:#E8F2F7;position:relative;top:1px}
#boxy #tab_cony{border:1px solid #AACBEE;border-top:none;padding:20px}
#boxy #tab_cony li{display:none}
#boxy #tab_cony #tab_cony_1{display:block;}
</style>
<div id="boxy">
<ul id="taby">
<li class="on" id="taby_1" onmouseover="switchTaby(1)">新闻</li>
<li id="taby_2" onmouseover="switchTaby(2)">财经</li>
<li id="taby_3" onmouseover="switchTaby(3)">娱乐</li>
<li id="taby_4" onmouseover="switchTaby(4)">娱乐</li>
</ul>
<ul id="tab_cony">
<li id="tab_cony_1">新闻内容</li>
<li id="tab_cony_2">财经内容</li>
<li id="tab_cony_3">娱乐内容</li>
<li id="tab_cony_4">娱乐内容3</li>
</ul>
</div>
<script type="text/javascript">
function switchTaby(n){
for(var i = 1; i <= 4; i++){
document.getElementById("taby_" + i).className = "";
document.getElementById("tab_cony_" + i).style.display = "none";
}
document.getElementById("taby_" + n).className = "on";
document.getElementById("tab_cony_" + n).style.display = "block";
}
</script>
/*********4**********/
<style type="text/css">
#boxk{width:500px;font-size:12px}
#boxk ul{margin:0;padding:0;list-style:none}
#boxk #tabk{height:25px;padding-left:10px;border-bottom:1px solid #AACBEE}
#boxk #tabk li{width:80px;height:18px;padding-top:7px;margin-right:10px;text-align:center;float:left;background:#F3F8FD;cursor:pointer}
#boxk #tabk li.on{width:78px;height:19px;padding-top:5px;border:1px solid #AACBEE;border-bottom:none;color:#00f;background:#E8F2F7;position:relative;top:1px}
#boxk #tab_conk{border:1px solid #AACBEE;border-top:none;padding:20px}
#boxk #tab_conk li{display:none}
#boxk #tab_conk #tab_conk_1{display:block;}
</style>
<div id="boxk">
<ul id="tabk">
<li class="on" id="tabk_1" onmouseover="switchTabk(1)">新闻</li>
<li id="tabk_2" onmouseover="switchTabk(2)">财经</li>
<li id="tabk_3" onmouseover="switchTabk(3)">娱乐</li>
<li id="tabk_4" onmouseover="switchTabk(4)">娱乐</li>
</ul>
<ul id="tab_conk">
<li id="tab_conk_1">新闻内容</li>
<li id="tab_conk_2">财经内容</li>
<li id="tab_conk_3">娱乐内容</li>
<li id="tab_conk_4">娱乐内容3</li>
</ul>
</div>
<script type="text/javascript">
function switchTabk(n){
for(var i = 1; i <= 4; i++){
document.getElementById("tabk_" + i).className = "";
document.getElementById("tab_conk_" + i).style.display = "none";
}
document.getElementById("tabk_" + n).className = "on";
document.getElementById("tab_conk_" + n).style.display = "block";
}
</script>
/*********5**********/
<style type="text/css">
#boxt{width:500px;font-size:12px}
#boxt ul{margin:0;padding:0;list-style:none}
#boxt #tabt{height:25px;padding-left:10px;border-bottom:1px solid #AACBEE}
#boxt #tabt li{width:80px;height:18px;padding-top:7px;margin-right:10px;text-align:center;float:left;background:#F3F8FD;cursor:pointer}
#boxt #tabt li.on{width:78px;height:19px;padding-top:5px;border:1px solid #AACBEE;border-bottom:none;color:#00f;background:#E8F2F7;position:relative;top:1px}
#boxt #tab_cont{border:1px solid #AACBEE;border-top:none;padding:20px}
#boxt #tab_cont li{display:none}
#boxt #tab_cont #tab_cont_1{display:block;}
</style>
<div id="boxt">
<ul id="tabt">
<li class="on" id="tabt_1" onmouseover="switchTabt(1)">新闻</li>
<li id="tabt_2" onmouseover="switchTabt(2)">财经</li>
<li id="tabt_3" onmouseover="switchTabt(3)">娱乐</li>
<li id="tabt_4" onmouseover="switchTabt(4)">娱乐</li>
</ul>
<ul id="tab_cont">
<li id="tab_cont_1">新闻内容</li>
<li id="tab_cont_2">财经内容</li>
<li id="tab_cont_3">娱乐内容</li>
<li id="tab_cont_4">娱乐内容3</li>
</ul>
</div>
<script type="text/javascript">
function switchTabt(n){
for(var i = 1; i <= 4; i++){
document.getElementById("tabt_" + i).className = "";
document.getElementById("tab_cont_" + i).style.display = "none";
}
document.getElementById("tabt_" + n).className = "on";
document.getElementById("tab_cont_" + n).style.display = "block";
}
</script>
/***********6*************/
<style type="text/css">
#boxe{width:500px;font-size:12px}
#boxe ul{margin:0;padding:0;list-style:none}
#boxe #tabe{height:25px;padding-left:10px;border-bottom:1px solid #AACBEE}
#boxe #tabe li{width:80px;height:18px;padding-top:7px;margin-right:10px;text-align:center;float:left;background:#F3F8FD;cursor:pointer}
#boxe #tabe li.on{width:78px;height:19px;padding-top:5px;border:1px solid #AACBEE;border-bottom:none;color:#00f;background:#E8F2F7;position:relative;top:1px}
#boxe #tab_cone{border:1px solid #AACBEE;border-top:none;padding:20px}
#boxe #tab_cone li{display:none}
#boxe #tab_cone #tab_cone_1{display:block;}
</style>
<div id="boxe">
<ul id="tabe">
<li class="on" id="tabe_1" onmouseover="switchTabe(1)">新闻</li>
<li id="tabe_2" onmouseover="switchTabe(2)">财经</li>
<li id="tabe_3" onmouseover="switchTabe(3)">娱乐</li>
<li id="tabe_4" onmouseover="switchTabe(4)">娱乐</li>
<li id="tabe_5" onmouseover="switchTabe(5)">娱乐</li>
</ul>
<ul id="tab_cone">
<li id="tab_cone_1">新闻内容</li>
<li id="tab_cone_2">财经内容</li>
<li id="tab_cone_3">娱乐内容</li>
<li id="tab_cone_4">娱乐内容3</li>
<li id="tab_cone_5">娱乐内容3</li>
</ul>
</div>
<script type="text/javascript">
function switchTabe(n){
for(var i = 1; i <= 5; i++){
document.getElementById("tabe_" + i).className = "";
document.getElementById("tab_cone_" + i).style.display = "none";
}
document.getElementById("tabe_" + n).className = "on";
document.getElementById("tab_cone_" + n).style.display = "block";
}
</script>
</body>
</html>

可重复使用Tab切换代码和纯js代码的更多相关文章

  1. 纯js代码实现手风琴特效

    我知道现在大多数前端开发人员都在使用jQuery等第三方的库来进行开发,这不仅节约了时间,也让效率大大的提高,并让公司的效益增加,何乐而不为呢? 但是,这也会有一定的缺点,比如jQ比js慢,尤其在大型 ...

  2. 城市连动纯js代码DEMO

    前台代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" co ...

  3. 站长常用的200个js代码 站长常用js代码大全 站长常用js代码集合

    站长常用的200个js代码 1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect: ...

  4. 6行代码实现纯js导出excel

    // excel导出当前列表 function memberExport() { var oHtml = $('#list').html(); var excelHtml = '<html> ...

  5. 图片切换效果,纯js

    公司有个技术很牛x的“老腊肉”,我向他请教,他给了我个网址,上面蛮多效果的,于是乎~我决定照着效果看能不能自己敲出来,我要变大神X3,重要的事说3遍. 它完成的效果是这样的: 好吧,一步一步来,先把框 ...

  6. jxbrowser java代码直接调用js代码

    https://blog.csdn.net/shuaizai88/article/details/73743669 final Browser browser = new Browser(); Bro ...

  7. 四十年前的 6502 CPU 指令翻译成 JS 代码会是怎样

    去年折腾的一个东西,之前 blog 里也写过,不过那时边琢磨边写,所以比较杂乱,现在简单完整地讲解一下. 前言 当时看到一本虚拟机相关的书,正好又在想 JS 混淆相关的事,无意中冒出个问题:能不能把某 ...

  8. 使用Underscore.js的template将Backbone.js的js代码和html代码分离

    这段时间在学习Require.js和Backbone.js的过程中,发现有些项目里的HTML代码都是写在View的js代码里面的,渲染的时候需要对Collection进行循环,再将HTML代码拼接上去 ...

  9. 原始的js代码和jquery对比

    Even a task as simple as this can be complicated without jQuery at our disposal. In plain JavaScript ...

随机推荐

  1. 数据挖掘算法Analysis Services-基于SQL Server的数据挖掘

    数据挖掘算法(Analysis Services – 数据挖掘) data mining algorithm is a set of heuristics and calculations that ...

  2. 利用pycharm远程调试openstack代码

    1.安装pycharm专业版 本文安装pycharm 2016.2.3专业版.网上教程较多,这里不做详细介绍,只要到pycharm官网上下载应用程序进行安装即可. 2.pycharm配置 (1)首先按 ...

  3. f5 ddos cc——Mitigating DDoS Attacks with F5 Technology

    摘自:https://f5.com/resources/white-papers/mitigating-ddos-attacks-with-f5-technology Mitigating Appli ...

  4. mysql-in关键字,分组查询,分页查询

    1. in关键字,组查询 # 使用or来查询的化,不方便而且参数一多比较傻 select * from users where id=1 or id=2 or id=4; select * from ...

  5. python:一个比较有趣的脚本

    宿舍火星wifi经常掉,然后要重启,于是用Python写了一个脚本,用来远程控制火星wifi的重启 思路: 01.使用socket通讯 02.在wifi主机(开wifi的电脑)上运行客户端,控制机运行 ...

  6. 使用display:inline-block产生间隙

    使用display:inline-block产生间隙 一.产生的原因:当初设立标准的不是亚洲而是欧洲,inline元素为了正确显示英文字母如y j g等带有尾巴的,就在底下留空.二.解决办法: 四个d ...

  7. laravel中Blade模板继承

    Blade模板继承 和 区块 <!-- 文件保存于 resources/views/layouts/app.blade.php --> <html> <head> ...

  8. HDU 1561 The more, The Better(树形DP+01背包)

    The more, The Better Time Limit : 6000/2000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other ...

  9. Flask的配置文件

    Flask的配置文件 与 session 配置文件 flask中的配置文件是一个flask.config.Config对象(继承字典) 默认配置为: { 'DEBUG': get_debug_flag ...

  10. Ubuntu下搭建WordPress环境

    WordPress是一种使用PHP语言开发的博客平台,用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站.也可以把 WordPress当作一个内容管理系统(CMS)来使用.WordPr ...