当前位置： &
& html5响应式图标导航菜单样式点击图标导航选项卡切换效果
发布日期： 08:02:55
特效素材介绍：html5响应式图标导航菜单样式点击图标导航选项卡切换效果
下载积分：20积分，再次下载不扣分简洁选项卡Tab，点击后对应背景也会切换_模板无忧
简洁选项卡Tab，点击后对应背景也会切换_层和布局特效
同样是一个选项卡，但多了一个很有趣且很实用的功能，就是当鼠标点击选项卡的任一项的时候，对应的背景也会切换，这就增加了本Tab的适用范围，会让你的网页更个性，更能满足你的布局。一位作者根据本站的一款选项卡扩展的功能，感谢奉献。
&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &
&html xmlns="http://www.w3.org/1999/xhtml"&
&meta http-equiv="Content-Type" mrc="text/charset=gb2312" /&
&title&常用简洁Tab-&/title&
&style type="text/css"&
font:12px "宋体";
/*选项卡*/
width:100%;
background:#697dc6;
/*菜单class*/
.Menubox {
line-height:20
margin-top:37
margin-left:6
.Menubox ul{
list-style:
.Menubox li{
.Menubox li.hover{
line-height:22
margin:-2px 0 0 0;
.Menubox li span.li01{display:text-align:border:solid 1px #padding:0 11px 0 11background:#0badc9;}
.Menubox li span.li02{display:text-align:border:solid 1px #padding:0 11px 0 11margin:0 -1px 0 -1background:#008782;}
.Menubox li span.li03{display:text-align:border:solid 1px #padding:0 11px 0 11margin:0 -0px 0 -0background:#0d5c2a;}
.Menubox li span.li04{display:text-align:border:solid 1px #padding:0 11px 0 11margin:0 0px 0 -1background:#384685;}
.Menubox li span.li05{display:text-align:border:solid 1px #padding:0 11px 0 11margin:0 0px 0 -1background:#8e0409;}
.Menubox li span.li06{display:text-align:border:solid 1px #padding:0 11px 0 11margin:0 0px 0 -1background:#ff9004;}
.Menubox li span.li07{display:text-align:border:solid 1px #padding:0 11px 0 11margin:0 -1px 0 -1background:#000;}
.Menubox li span:hover{
.Contentbox{
text-align:
margin-top:0
height:181
color:#000;
&!--选项卡--&
&script language=javascript&
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 language=javascript&
function get_cookie(name_to_get) {
var cookie_pair
var cookie_name
var cookie_value
var cookie_array = document.cookie.split("; ")
for (counter = 0; counter & cookie_array. counter++) {
cookie_pair = cookie_array[counter].split("=")
cookie_name = cookie_pair[0]
cookie_value = cookie_pair[1]
if (cookie_name == name_to_get) {
return unescape(cookie_value)
return null
// Get the bgColor cookie
var bg_color = get_cookie("bgColor_cookie")
function set_color(color_val) {
set_cookie("bgColor_cookie", color_val, 365, "/")
function set_cookie(cookie_name, cookie_value, cookie_expire, cookie_path, cookie_domain, cookie_secure) {
var cookie_string = cookie_name + "=" + cookie_value
// [url]/[/url]
if (cookie_expire) {
var expire_date = new Date()
var ms_from_now = cookie_expire * 0 * 60 * 60 * 1000
expire_date.setTime(expire_date.getTime() + ms_from_now)
var expire_string = expire_date.toGMTString()
cookie_string += "; expires=" + expire_string
if (cookie_path) {
cookie_string += "; path=" + cookie_path
if (cookie_domain) {
cookie_string += "; domain=" + cookie_domain
if (cookie_secure) {
cookie_string += "; true"
// Set the cookie
document.cookie = cookie_string
if (bg_color) {
bb1.style.backgroundColor = bg_color
&div class="Tab1" id="bb1"&
&div class="tab2"&
&div class="tab3"&
&div class="Menubox"&
id="two1" onclick="document.getElementById('bb1').style.backgroundColor='#697dc6';set_color('#697dc6');setTab('two',1,7)" class="hover"&
&span class="li01"&模板无忧首页&/span&&/li&
&li class="li02" id="two2" onclick="set_color('#007C8B');setTab('two',2,7);document.getElementById('bb1').style.backgroundColor='#007C8B'" &
&span class="li02"&内容分发管理&/span&&/li&
&li class="li03" id="two3" onclick="document.getElementById('bb1').style.backgroundColor='#02622A';set_color('#02622A');setTab('two',3,7)"&
&span class="li03"&实验室数据分析&/span&&/li&
&li class="li04" id="two4" onclick="document.getElementById('bb1').style.backgroundColor='#2a3c79';set_color('#2a3c79');setTab('two',4,7)"&
&span class="li04"&无公害农产品认证&/span&&/li&
&li class="li05" id="two5" onclick="document.getElementById('bb1').style.backgroundColor='#860407';set_color('#860407');setTab('two',5,7)"&
&span class="li05"&电子商务系统&/span&&/li&
&li class="li06" id="two6" onclick="setTab('two',6,7);document.getElementById('bb1').style.backgroundColor='#F79305';set_color('#F79305')"&
&span class="li06"&软件编程与实践&/span&&/li&
&li class="li07" id="two7" onclick="document.getElementById('bb1').style.backgroundColor='#000';set_color('#000');setTab('two',7,7)"&
&span class="li07"&平台设置&/span&&/li&
&div class="Contentbox"&
&div id="con_two_1" class="hover"&&a href="/"&&img src="/images/logo.gif" border="0"&模板无忧&/a&&/div&
&div id="con_two_2" style="display:none"&&center&内容分发管理的内容&/center&&/div&
&div id="con_two_3" style="display:none"&&center&实验室数据分析&/center&&/div&
&div id="con_two_4" style="display:none"&&center&无公害农产品认证&/center&&/div&
&div id="con_two_5" style="display:none"&&center&电子商务系统的内容&/center&&/div&
&div id="con_two_6" style="display:none"&&center&软件编程与实践的内容&/center&&/div&
&div id="con_two_7" style="display:none"&&center&平台设置&/center&&/div&
相关层和布局特效：
特效代码搜索
层和布局特效推荐
猜你也喜欢看这些带控制箭头的左右切换Tab选项卡代码 - 素材家园
当前位置： >
> 带控制箭头的左右切换Tab选项卡代码
带控制箭头的左右切换Tab选项卡代码，tab里面可以放html代码，不限于文字，基于jquery，兼容主流浏览器。
大家都在下载
这些是最新的
素材家园免费素材网我的网站,欢迎您的光临！
当前位置：>>>>>>
jquery文章或者内容选项卡切换，支持按键左右切换
来源：未知
编辑：管理员
推广网址赚积分
文件大小：0.13 MB
下载次数：
所属分类：
☉推荐使用迅雷或快车等多线程下载软件下载本站资源。
☉未登录会员无法下载，登录后可获得更多便利功能，如未注册，请先。
☉如果服务器暂不能下载请稍后重试！总是不能下载，请,谢谢合作！
☉本站所有资源（包括模板、素材、软件、字体等）仅供学习与参考，请勿用于商业用途。
☉如有其他问题，请加建站厅交流()进行交流。&
☉人民币与M币率为1比100,即1元=100M币.有任何疑问请!
需要：0M币
相关推荐图文
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
本类排行榜jquery tab选项卡，支持垂直选项卡滚动、水准选项卡滚动、自动选项卡切换 - Web前端当前位置:& &&&jquery tab选项卡，支持垂直选项卡滚动、水准选项卡jquery tab选项卡，支持垂直选项卡滚动、水准选项卡滚动、自动选项卡切换&&网友分享于：&&浏览：2次jquery tab选项卡，支持垂直选项卡滚动、水平选项卡滚动、自动选项卡切换
支持垂直选项卡滚动、水平选项卡滚动、自动选项卡切换图片就不上了，很多效果，直接看演示演示地址:/demo/3803/index.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/charset=utf-8" /&&title&jquery tab选项卡，支持垂直选项卡滚动、水平选项卡滚动、自动选项卡切换-&/title&&style type="text/css"&*{margin:0padding:0list-style-type:}a{color:#35679a;text-decoration:}a:hover{color:#c00;text-decoration:}a,img{border:}body{text-align:background:#505050;font-size:12font-family:Arial, Helvetica, sans-}.cont{background:#080808;padding:8width:840margin:0}.main{background:#padding:6}h2{font-size:16font-family:"黑体";color:#35679a;;padding:4px 10margin:10px 0 16font-weight:100;border-bottom:2px solid #}h3{padding-left:50font-size:16color:#555;}.testtab{border:4px solid #margin:10px 50}.tabtag{line-height:24height:24border-bottom:2px solid #}.tabtag li{float:width:24%;text-align:background:#}.tabtag li.cur{color:#900;background:#}.tabcon{height:100overflow:}.tabcon div{height:100color:#900;font-size:14}#tabcon2,#tabcon4{height:340overflow:}.tabcon li{line-height:25padding:0 0 0 10}pre{color:#444;}pre strong{font-weight:900;}&/style&&script type="text/javascript" src="../jquery.js"&&/script& &script type="text/javascript" src="js/tab.lib.js"&&/script&&script type="text/javascript"&$(document).ready(function(){/* 垂直滚动 点击触发 */$("#testtab").tab({tabId:"#tabtag",tabTag:"li",conId:"#tabcon",conTag:"div",act:"click",effact: "scrolly", dft:0});/* 水平滚动 点击触发 设置起始显示序列 */$("#testtab2").tab({tabId:"#tabtag2",tabTag:"li",conId:"#tabcon2",conTag:"div",act:"mouseover",effact: "scrollx",dft:0});/* 无效果 自动切换 */$("#testtab3").tab({tabId:"#tabtag3",tabTag:"li",conId:"#tabcon3",conTag:"div",auto:true,act:"mouseover"});/* slow 缓慢滚动效果 */$("#testtab4").tab({tabId:"#tabtag4",tabTag:"li",conId:"#tabcon4",conTag:"div",effact: "slow",act:"mouseover"});/* 选项卡切换 */$("#testtab5").tab({tabId:"#tabtag5",tabTag:"li",conId:"#tabcon5",conTag:"div",act:"mouseover"});});&/script&&/head&&body&&div align="center"&&a href="../../archives/3.html"&&h2&jquery tab选项卡，支持垂直选项卡滚动、水平选项卡滚动、自动选项卡切换&/h2&&/a&&/div&&div class="cont"&&div class="main"&&h2&切换&/h2& &h3&垂直滚动 点击触发&/h3& &div class="testtab" id="testtab"&&div id="tabtag" class="tabtag" style="position:"&&ul&&li class="cur"&jquery 特效&/li&&li&javascript 特效&/li&&li&css 特效&/li&&li&html5 特效&/li&&/ul&&/div&&div id="tabcon" class="tabcon"&&div&&ul& &li&&a href=""&jquery特效制作banner图片滚动播放、按钮控制图片滚动、选项卡等基于多功能jquery slide插件&/a&&/li&&li&&a href=""&jQuery特效插件:Tablesorter 2.0 表格用户体验内容筛选与分页筛选&/a&&/li& &li&&a href=""&jquery特效插件Validform制作一行代码搞定整站的表单验证&/a&&/li& &li&&a href=""&jquery特效制作 slide 图片窗帘式滚动&/a&&/li& &/ul& &/div&&div&&ul& &li&&a href=""&javascript特效按钮控制图片左右自动滚动&/a&&/li&&li&&a href=""&javascript特效多功能选项卡自动切换内容图片延迟加载&/a&&/li& &li&&a href=""&javascript特效图片滚动插件支持单排图片上下滚动、图片无缝滚动&/a&&/li& &li&&a href=""&javascript特效网页banner制作焦点图片切换带按钮和固定图标控制图片左右滚动&/a&&/li&&/ul&&/div&&div&&ul&&li&&a href=""&纯CSS下拉菜单&/a&&/li&&li&&a href=""&CSS3的动画按钮泡泡&/a&&/li&&li&&a href=""&用CSS3更换一个确认对话框的jQuery&/a&&/li&&li&&a href=""&使用jQuery制作更好的selcet选择元素和CSS3&/a&&/li& &/ul&&/div&&div&&ul& &li&&a href=""&制作CSS3和HTML5的一个单页网站模板&/a&&/li&&li&&a href=""&一个HTML5的幻灯片基于jQuery框架&/a&&/li& &li&&a href=""&旋转幻灯片使用jQuery和CSS3&/a&&/li& &/ul&&/div&&/div&&/div&&pre&$("#testtab").tab({tabId:"#tabtag", //切换控制器的IDtabTag:"li", //切换控制器标签conId:"#tabcon", //内容容器IDconTag:"div", //容器标签act:"click", //点击触发 也可以不设置 默认就为click 设置为 mouseover则为划过effact: "scrolly" //效果为纵向滚动})&/pre&&h3&水平滚动 点击触发 设置起始显示序列&/h3& &div class="testtab" id="testtab2"&&div id="tabtag2" class="tabtag" style="position:"&&ul&&li class="cur"&jquery 特效&/li&&li&javascript 特效&/li&&li&css 特效&/li&&li&html5 特效&/li&&/ul&&/div&&div id="tabcon2"&&div&&a href=""&&img width="620" height="340" alt="用jquery特效制作图片金字塔式放大缩小展示" src="../demo1.jpg" /&&/a&&/div&&div&&a href=""&&img width="620" height="340" alt="javascript特效图片滚动插件支持单排图片上下滚动、图片无缝滚动" src="../demo2.jpg" /&&/a&&/div&&div&&a href=""&&img width="620" height="340" alt="CSS3的动画按钮泡泡" src="../demo3.jpg" /&&/a&&/div&&div&&a href=""&&img width="620" height="340" alt="旋转幻灯片使用jQuery和CSS3" src="../demo4.jpg" /&&/a&&/div&&/div&&/div&&pre&$("#testtab2").tab({tabId:"#tabtag2", //切换控制器的IDtabTag:"li", //切换控制器标签conId:"#tabcon2", //内容容器IDconTag:"div", //容器标签act:"click", //点击触发 也可以不设置 默认就为click 设置为 mouseover则为划过effact: "scrollx", //横向滚动效果&strong&dft:2&/strong& //设置起始显示序列})&/pre&&h3&无效果 自动切换&/h3& &div class="testtab" id="testtab3"&&div id="tabtag3" class="tabtag" style="position:"&&ul&&li class="cur"&jquery 特效&/li&&li&javascript 特效&/li&&li&css 特效&/li&&li&html5 特效&/li&&/ul&&/div&&div id="tabcon3" class="tabcon"&&div&&ul& &li&&a href=""&jquery特效制作banner图片滚动播放、按钮控制图片滚动、选项卡等基于多功能jquery slide插件&/a&&/li&&li&&a href=""&jQuery特效插件:Tablesorter 2.0 表格用户体验内容筛选与分页筛选&/a&&/li& &li&&a href=""&jquery特效插件Validform制作一行代码搞定整站的表单验证&/a&&/li& &li&&a href=""&jquery特效制作 slide 图片窗帘式滚动&/a&&/li& &/ul& &/div&&div&&ul& &li&&a href=""&javascript特效按钮控制图片左右自动滚动&/a&&/li&&li&&a href=""&javascript特效多功能选项卡自动切换内容图片延迟加载&/a&&/li& &li&&a href=""&javascript特效图片滚动插件支持单排图片上下滚动、图片无缝滚动&/a&&/li& &li&&a href=""&javascript特效网页banner制作焦点图片切换带按钮和固定图标控制图片左右滚动&/a&&/li&&/ul&&/div&&div&&ul&&li&&a href=""&纯CSS下拉菜单&/a&&/li&&li&&a href=""&CSS3的动画按钮泡泡&/a&&/li&&li&&a href=""&用CSS3更换一个确认对话框的jQuery&/a&&/li&&li&&a href=""&使用jQuery制作更好的selcet选择元素和CSS3&/a&&/li& &/ul&&/div&&div&&ul& &li&&a href=""&制作CSS3和HTML5的一个单页网站模板&/a&&/li&&li&&a href=""&一个HTML5的幻灯片基于jQuery框架&/a&&/li& &li&&a href=""&旋转幻灯片使用jQuery和CSS3&/a&&/li& &/ul&&/div&&/div&&/div&&pre&$("#testtab3").tab({tabId:"#tabtag3",tabTag:"li",conId:"#tabcon3",conTag:"div",&strong&auto:true,&/strong&act:"mouseover"}) &/pre&&h3&“slow” 缓慢滚动效果&/h3& &div class="testtab" id="testtab4"&&div id="tabtag4" class="tabtag" style="position:"&&ul&&li class="cur"&jquery 特效&/li&&li&javascript 特效&/li&&li&css 特效&/li&&li&html5 特效&/li&&/ul&&/div&&div id="tabcon4"&&div&&a href=""&&img width="620" height="340" alt="用jquery特效制作图片金字塔式放大缩小展示" src="../demo1.jpg" /&&/a&&/div&&div&&a href=""&&img width="620" height="340" alt="javascript特效图片滚动插件支持单排图片上下滚动、图片无缝滚动" src="../demo2.jpg" /&&/a&&/div&&div&&a href=""&&img width="620" height="340" alt="CSS3的动画按钮泡泡" src="../demo3.jpg" /&&/a&&/div&&div&&a href=""&&img width="620" height="340" alt="旋转幻灯片使用jQuery和CSS3" src="../demo4.jpg" /&&/a&&/div&&/div&&/div&&pre&$("#testtab4").tab({tabId:"#tabtag4",tabTag:"li",conId:"#tabcon4",conTag:"div",&strong&effact: "slow"&/strong&}) &/pre&&h3&普通选项卡&/h3& &div class="testtab" id="testtab5"&&div id="tabtag5" class="tabtag" style="position:"&&ul&&li class="cur"&jquery 特效&/li&&li&javascript 特效&/li&&li&css 特效&/li&&li&html5 特效&/li&&/ul&&/div&&div id="tabcon5" class="tabcon"&&div&&ul& &li&&a href=""&jquery特效制作banner图片滚动播放、按钮控制图片滚动、选项卡等基于多功能jquery slide插件&/a&&/li&&li&&a href=""&jQuery特效插件:Tablesorter 2.0 表格用户体验内容筛选与分页筛选&/a&&/li& &li&&a href=""&jquery特效插件Validform制作一行代码搞定整站的表单验证&/a&&/li& &li&&a href=""&jquery特效制作 slide 图片窗帘式滚动&/a&&/li& &/ul& &/div&&div&&ul& &li&&a href=""&javascript特效按钮控制图片左右自动滚动&/a&&/li&&li&&a href=""&javascript特效多功能选项卡自动切换内容图片延迟加载&/a&&/li& &li&&a href=""&javascript特效图片滚动插件支持单排图片上下滚动、图片无缝滚动&/a&&/li& &li&&a href=""&javascript特效网页banner制作焦点图片切换带按钮和固定图标控制图片左右滚动&/a&&/li&&/ul&&/div&&div&&ul&&li&&a href=""&纯CSS下拉菜单&/a&&/li&&li&&a href=""&CSS3的动画按钮泡泡&/a&&/li&&li&&a href=""&用CSS3更换一个确认对话框的jQuery&/a&&/li&&li&&a href=""&使用jQuery制作更好的selcet选择元素和CSS3&/a&&/li& &/ul&&/div&&div&&ul& &li&&a href=""&制作CSS3和HTML5的一个单页网站模板&/a&&/li&&li&&a href=""&一个HTML5的幻灯片基于jQuery框架&/a&&/li& &li&&a href=""&旋转幻灯片使用jQuery和CSS3&/a&&/li& &/ul&&/div&&/div&&/div&&pre&$("#testtab5").tab({tabId:"#tabtag5",tabTag:"li",conId:"#tabcon5",conTag:"div"}) &/pre&&/div&&/div&&/body&&/html& 原文地址:/archives/3.html
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 12345678910 Copyright & &&版权所有}