双层tab选项卡代码(tabs选项卡)
admin 发布:2022-12-19 22:52 176
今天给各位分享双层tab选项卡代码的知识,其中也会对tabs选项卡进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!
本文目录一览:
- 1、百度新闻 tab选项卡怎么做的
- 2、基于jquery实现的tab选项卡功能示例【附源码下载】
- 3、vb中TabStrip控件怎样用代码来切换选项卡?
- 4、如何用js代码写一个tab选项卡
- 5、C# tabControl 有两个选项卡yftab和yhtab,右键动态向选项卡中添加GroupBox,怎么用循环添加多个?
- 6、一个页面内加入三个tab选项卡的代码
百度新闻 tab选项卡怎么做的
tab切换:有多少种实现方式!
1,css+js
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8"/
titletab切换/title
meta name="keywords" content="" /
meta name="Description" content="" /
link rel="stylesheet" type="text/css" href=""/
style type="text/css"
ul,li,div {padding:0;margin:0;}
ul li {float:left;width:100px;height:30px;line-height:30px;text-align:center;background-color:#fff;border:1px #bbb solid;border-bottom:none;}
ul li.fli {background-color:#ccc;color:red;}
ul {overflow:hidden;zoom:1;list-style-type:none;}
#tab_con {width:304px;height:200px;}
#tab_con div {width:304px;height:200px;display:none;border:1px #bbb solid;border-top:none;}
#tab_con div.fdiv {display:block;background-color:#ccc;}
/style
/head
body
ul id="tab"
li class="fli"tab1/li
litab2/li
litab3/li
/ul
div id="tab_con"
div class="fdiv"aaaa/div
divbbbb/div
divcccc/div
/div
JS代码:
script type="text/javascript"
var tabs=document.getElementById("tab").getElementsByTagName("li");
var divs=document.getElementById("tab_con").getElementsByTagName("div");
for(var i=0;itabs.length;i++){
tabs[i].onclick=function(){change(this);}
}
function change(obj){
for(var i=0;itabs.length;i++)
{
if(tabs[i]==obj){
tabs[i].className="fli";
divs[i].className="fdiv";
}
else{
tabs[i].className="";
divs[i].className="";
}
}
}
/script
2,jquery
script type="text/javascript"
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
/script
--------------------------------分割线---------------------------------------
div class="container"
ul class="tabs"
li class="active"a href="#tab1"导航菜单/a/li
lia href="#tab4"TAB标签/a/li
/ul
div class="tab_container"
div id="tab1" class="tab_content" style="display: block; "
h3a href=""jquery css多级下拉菜单/a/h3
p id=""多级菜单,理论上支持无限多的层级,文件结构非常简单的,具体的请看下面的内容/p
/div
div id="tab4" class="tab_content" style="display: none; "
h2各种tab标签选项卡/h2
h3a href=""tab标签页面,ajax载入/a/h3
p tab标签,jquery ajax载入数据库的内容/p
/div
/div
/div
基于jquery实现的tab选项卡功能示例【附源码下载】
本文实例讲述了基于jquery实现的tab选项卡功能。分享给大家供大家参考,具体如下:
jquery这款杀手级别的js框架,显然已成了开发界的标准js库,在开发一般web应用的时候,常常用到。今天找到一个实现jquery
tab页的插件,效果还不错,比自己用javascript和css去实现一个tab页好多了。用
tab
页美化界面,对于用户体验来说是显而易见,让各种不同类型的数据分布在不同的tab页中。很直观,也避免了很多数据现在在一个界面中,显得很臃肿,看上去就怕。这一款基于jquery
的tab
页插件名字叫:billy.carousel.
先看看效果图
看上去效果还不错吧。
下面看jquery
tab
的html页面代码吧
!DOCTYPE
html
head
meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/
meta
name="description"
content="jQuery实现的tab选项卡式图片切换效果"
/
titlejQuery实现的tab选项卡式图片切换效果/title
!--
JS
Includes
--
script
src="images/jquery.js"
type="text/javascript"/script
script
src="images/billy.carousel.jquery.min.js"
type="text/javascript"/script
!--
CSS
Includes
--
link
rel="stylesheet"
href="images/demonstration.css"
rel="external
nofollow"
type="text/css"
media="screen"
/
titletab选项测试/title
/head
body
script
type="text/javascript"
$(document).ready(
function()
{
$('#tabber').billy({
slidePause:
5000,
indicators:
$('ul#tabber_tabs'),
customIndicators:
true,
autoAnimate:
false,
noAnimation:
true
});
});
/script
div
id="container"
h3Jquery
Tab
选项卡测试/h3
p点击tab页切换/p
!--
The
Tabs
标题
--
ul
id="tabber_tabs"
lia
href="#0"
rel="external
nofollow"
Tab
One/a/li
lia
href="#1"
rel="external
nofollow"
Tab
Two/a/li
lia
href="#2"
rel="external
nofollow"
Tab
Three/a/li
lia
href="#3"
rel="external
nofollow"
Tab
Four/a/li
/ul
!--
Tabbed
内容区
--
div
id="tabber_clip"
ul
id="tabber"
liimg
src="images/desert.jpg"
width="900"
height="400"
alt="Desert"/li
li
br
/
我想有一座房子,面朝大海,春暖花开....
/li
liimg
src="images/wood.jpg"
width="900"
height="400"
alt="Wood"/li
liimg
src="images/pond.jpg"
width="900"
height="400"
alt="Pond"/li
/ul
/div
/div
/body
/html
在head中引入相关的jquery文件之后,按照上面的例子,就可以做出tab页面的样式了,非常简单了。如果需要调整样式,可以修改css.
代码点击此处本站下载。
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
您可能感兴趣的文章:基于JQuery的6个Tab选项卡插件JQuery
Tab选项卡效果代码改进版jQuery实现TAB选项卡切换特效简单演示jQuery实现Tab选项卡切换效果简单演示jquery实现超简洁的TAB选项卡效果代码jQuery实现滚动切换的tab选项卡效果代码jQuery实现移动端Tab选项卡效果jQuery封装的tab选项卡插件分享jquery实现tab选项卡切换效果(悬停、下方横线动画位移)动感效果的TAB选项卡jquery
插件
vb中TabStrip控件怎样用代码来切换选项卡?
利用代码切换TabStrip上卡片的方法如下:
(1)新建一个VB6工程。在窗体上布置一个TabStrip和三个Command
如上图,设置TabStrip属性,使之具有3个Tab
(2)Form1窗体代码
Option Explicit
Private Sub Command1_Click()
' 切换到 #1
TabStrip1.Tabs(1).Selected = True
End Sub
Private Sub Command2_Click()
' 切换到 #2
TabStrip1.Tabs(2).Selected = True
End Sub
Private Sub Command3_Click()
' 切换到 #3
TabStrip1.Tabs(3).Selected = True
End Sub
(3)运行效果
鼠标点击Command2后
鼠标点击Command3后
鼠标点击Command1后
如何用js代码写一个tab选项卡
代码如下:
html
head
style type="text/css"
*
{
padding-bottom: 0px;
margin: 0px;
padding-left: 0px;
padding-right: 0px;
font-size: 12px;
padding-top: 0px;
}
BODY
{
padding-left: 20px;
padding-top: 20px;
}
.wid240
{
width: 242px;
margin-bottom: 20px;
}
.wid180
{
width: 182px;
}
.tab
{
border-bottom: #000 1px solid;
border-left: #000 1px solid;
border-top: #000 1px solid;
border-right: #000 1px solid;
}
.tab UL
{
zoom: 1;
clear: both;
}
.tab UL:after
{
display: block;
height: 0px;
visibility: hidden;
clear: both;
content: "";
}
.tab UL LI
{
text-align: center;
line-height: 26px;
width: 60px;
display: inline;
background: #000;
float: left;
height: 26px;
color: #fff;
}
.tab UL LI.on
{
background: #fff;
color: #000;
}
.tabList
{
border-bottom: #000 1px solid;
border-left: #000 1px solid;
height: 150px;
border-top: #000 1px;
border-right: #000 1px solid;
}
.tabList .one
{
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
display: none;
color: #ff0000;
padding-top: 10px;
}
.tabList .block
{
display: block;
}
/style
script type="text/javascript"
function setTab(name,m,n){
for( var i=1;i=n;i++){
var menu = document.getElementById(name+i);
var showDiv = document.getElementById("cont_"+name+"_"+i);
menu.className = i==m ?"on":"";
showDiv.style.display = i==m?"block":"none";
}
}
/script
meta name="GENERATOR" content="MSHTML 8.00.7600.16535"
/head
body
div class="wid240"
div class="tab"
ul
li id="one1" class="on" onmouseover='setTab("one",1,4)'one1 /li
li id="one2" onmouseover='setTab("one",2,4)'one2 /li
li id="one3" onmouseover='setTab("one",3,4)'one3 /li
li id="one4" onmouseover='setTab("one",4,4)'one4 /li
/ul
/div
div class="tabList"
div id="cont_one_1" class="one block"
cont_one_1/div
div id="cont_one_2" class="one"
cont_one_2/div
div id="cont_one_3" class="one"
cont_one_3/div
div id="cont_one_4" class="one"
cont_one_4/div
/div
/div
div class="wid180"
div class="tab"
ul
li id="tow1" class="on" onclick='setTab("tow",1,3)'tow1 /li
li id="tow2" onclick='setTab("tow",2,3)'tow2 /li
li id="tow3" onclick='setTab("tow",3,3)'tow3 /li
/ul
/div
div class="tabList"
div id="cont_tow_1" class="one block"
cont_tow_1/div
div id="cont_tow_2" class="one"
cont_tow_2/div
div id="cont_tow_3" class="one"
cont_tow_3/div
/div
/div
/body
/html
直接复制到本地html页面运行就可以,望采纳,谢谢!
C# tabControl 有两个选项卡yftab和yhtab,右键动态向选项卡中添加GroupBox,怎么用循环添加多个?
// 用数组储存 gb1,gb2,gb3 现在变成了 gb[0],gb[1],gb[2]
private GroupBox[] gb = new GroupBox[] { new GroupBox(), new GroupBox(), new GroupBox() };
//这些变量名我是根据你的片段写的
//private int a;
//private TabControl yftab, yhtab; // 这两个变量名太接近了= =我差点看眼花了
//private TabControl tab0;
public void bufen(object sender, EventArgs e)
{
a++;
int width = yftab.SelectedTab.Size.Width;
int height = yftab.SelectedTab.Size.Height;
for (int i = 0; i a; i++) // 循环a次
{
gb[i].Size = new Size(width / a, height / a); // 一点数学计算啦
gb[i].Location = new Point(0, height / a * i);
}
if (tab0.SelectedIndex == 0)
yftab.SelectedTab.Controls.Add(gb[a - 1]);
if (tab0.SelectedIndex == 1)
yhtab.SelectedTab.Controls.Add(gb[a - 1]);
}
一个页面内加入三个tab选项卡的代码
style type="text/css"
!--
body{ padding:0;font:12px "宋体"; }
/*选项卡1*/
#lib_Tab1{width:500px;margin:0px;padding:0px;margin-bottom:15px;}
/*选项卡2*/
#lib_Tab2{width:576px;margin:0px;padding:0px;margin-bottom:15px; }
/*菜单class*/
.lib_tabborder{border:1px solid #95C9E1;}
.lib_Menubox {height:28px;line-height:28px;position:relative;}
.lib_Menubox ul{margin:0px;padding:0px;list-style:none; position:absolute; top:3px; left:0; margin-left:10px; height:25px;text-align:center;}
.lib_Menubox li{float:left;display:block;cursor:pointer;width:114px;color:#949694;font-weight:bold; margin-right:2px;height:25px;line-height:25px; background-color:#E4F2FD}
.lib_Menubox li.hover{padding:0px;background:#fff;width:116px;border-left:1px solid #95C9E1;border-top:1px solid #95C9E1;border-right:1px solid #95C9E1;
color:#739242;height:25px;line-height:25px;}
.lib_Contentbox{clear:both;margin-top:0px; border-top:none;height:181px; text-align:center;padding-top:8px;}
--
/style
script
!--
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
/head
body
div id="lib_Tab1"
div class="lib_Menubox lib_tabborder"
ul
li id="one1" onclick="setTab('one',1,4)" class="hover"新闻1/li
li id="one2" onclick="setTab('one',2,4)" 新闻2/li
li id="one3" onclick="setTab('one',3,4)"新闻3/li
li id="one4" onclick="setTab('one',4,4)"新闻4/li
/ul
/div
div class="lib_Contentbox lib_tabborder"
div id="con_one_1" 新闻列表1/div
div id="con_one_2" style="display:none"新闻列表2/div
div id="con_one_3" style="display:none"新闻列表3/div
div id="con_one_4" style="display:none"新闻列表4/div
/div
/div
div id="lib_Tab2"
div class="lib_Menubox lib_tabborder"
ul
li id="two1" onclick="setTab('two',1,4)" 新闻1/li
li id="two2" onclick="setTab('two',2,4)"class="hover" 新闻2/li
li id="two3" onclick="setTab('two',3,4)"新闻3/li
li id="two4" onclick="setTab('two',4,4)"新闻4/li
/ul
/div
div class="lib_Contentbox lib_tabborder"
div id="con_two_1" 新闻列表1/div
div id="con_two_2" style="display:none"新闻列表2/div
div id="con_two_3" style="display:none"新闻列表3/div
div id="con_two_4" style="display:none"新闻列表4/div
/div
/div
bR /
div id="lib_Tab3"
div class="lib_Menubox lib_tabborder"
ul
li id="tab1" onclick="setTab('tab',1,4)" 新闻1/li
li id="tab2" onclick="setTab('tab',2,4)"class="hover" 新闻2/li
li id="tab3" onclick="setTab('tab',3,4)"新闻3/li
li id="tab4" onclick="setTab('tab',4,4)"新闻4/li
/ul
/div
关于双层tab选项卡代码和tabs选项卡的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。
版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;
相关推荐
- 05-09网页代码,网页代码快捷键
- 05-06单页网站的代码(完整的网页代码)[20240506更新]
- 05-06个人主页图片代码(个人主页图片代码怎么弄)[20240506更新]
- 05-06提取微信名片代码(微信名片信息提取)[20240506更新]
- 05-06php后台权限管理代码(php管理员权限)[20240506更新]
- 05-06付费观看代码php(付费观看代码)[20240506更新]
- 05-06在线html执行代码(html怎么运行)[20240506更新]
- 05-06源代码管理资源管理器(资源管理器运行代码)[20240506更新]
- 05-06代码源软件库(程序代码库)[20240506更新]
- 05-06点击弹出密码代码(点击弹出密码代码错误)[20240506更新]
取消回复欢迎 你 发表评论:
- 标签列表
- 最近发表
- 友情链接