jQuery-简单选项卡,jquery-选项卡
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>选项卡</title>
5 <meta http-equiv="content-type" content="text/html" charset="utf-8" accesskey=""/>
6 <script type="text/javascript" src="jquery-1.8.3.js"></script>
7 <style type="text/css">
8 body,div,ul,li{
9 margin: 0;
10 padding: 0;
11 }
12 ul{
13 width: 405px;
14 margin: auto;
15 overflow: hidden;
16 }
17 li{
18 list-style: none;
19 float: left;
20 width: 100px;
21 height: 30px;
22 line-height: 30px;
23 text-align: center;
24 border: 1px solid #848484;
25 border-right: none;
26 overflow: hidden;
27 cursor: pointer;
28 }
29 li:first-child{
30 border-bottom: 1px solid #fff;
31 }
32 li:last-child{
33 border-right: 1px solid #848484;
34 }
35 #wrap{
36 width: 403px;
37 margin: 70px auto;
38 text-align: center;
39 position: relative;
40 }
41 #wrap div{
42 position: absolute;
43 text-align: center;
44 width: 100%;
45 height: 200px;
46 line-height: 100px;
47 display: none;
48 border: 1px solid #848484;
49 border-top: none;
50 }
51 #wrap div:first-of-type{
52 display: block;
53 }
54 </style>
55 </head>
56 <body>
57 <div id="wrap">
58 <ul>
59 <li name="one"> 许嵩</li>
60 <li name="two">周杰伦</li>
61 <li name="three">林俊杰</li>
62 <li name="four">陈奕迅</li>
63 </ul>
64 <div name="one" dianji="one">庐州月</div>
65 <div name="two" dianji="two">东风破</div>
66 <div name="three" dianji="three">江南 曹操</div>
67 <div name="four" dianji="four">十年 浮夸</div>
68 </div>
69 <script type="text/javascript">
70 $("li").on("click",function(){
71 $("#wrap div[name!="+$(this).attr("name")+"]").fadeOut(1000);
72 $("#wrap div[name="+$(this).attr("name")+"]").fadeIn(1000);
73 $("#wrap li[name!="+$(this).attr("name")+"]").css({"border-bottom-color":"#848484"});
74 $("#wrap li[name="+$(this).attr("name")+"]").css({"border-bottom-color":"#fff"});
75 })
76 </script>
77 </body>
78 </html>
jQuery插件学习之选项卡Tab
创建选项卡组件
使用方法: html结构
<div id="tabs">
<ul>
<li><a href="#tabs-1">tab-1</a></li>
<li><a href="#tabs-2">tab-2</a></li>
<li><a href="#tabs-3">tab-3</a></li>
</ul>
<div id="tabs-1">tabs-1-panel</div>
<div id="tabs-2">tabs-2-panel</div>
<div id="tabs-3">tabs-3-panel</div>
</div>
js调用
$('#tab').tabs();
相关参数说明:
初始化参数
参数 默认值 参数说明
active null 设置被选中的选项卡的索引,默认值为null,例如设置选中第一个选项卡则设置为0
event click 选项卡的切换事件,默认为点击事件,可以设置mouseover
添加选项卡参数
参数 默认值 参数说明
title 空 选项卡显示的文本,默认为空
href 空 选项卡链接,如果为静态数据则填入对应的字符串(#str),远程数据则为对应的url
content 空 选项卡为静态数据时的内容,动态数据则无需填写
iconCls true 选项卡关闭按钮,默认为显示true,不显示则为false
Demo:
例子1: 静态数据:
<div id="tabs">
<ul>
<li><a href="#tabs-1">tab-1</a></li>
<li><a href="#tabs-2">tab-2</a></li>
<li><a href="#tabs-3">tab-3</a></li>
</ul>
<div id="tabs-1">tabs-1-panel</div>
<div id="tabs-2">tabs-2-panel</div>
<div id="tabs-3">tabs-3-panel</div>
</div>
js调用:
$('#tabs').tabs();
例子2: 通过远程数据加载页面,则动态创建panel,
<div id="tabs">
<ul>
<li><a href="#tabs-1">tab-1</a></li>
<li><a href="index.jsp">tab-2</a></li>
<li><a href="index.html">tab-3</a></li>
</ul>
<div id="tabs-1">tabs-1-panel</div>
</div>
js调用:
$('#tabs').tabs();
例子3: 传入参数,设置选项卡切换事件为mouseover
<div id="tabs">
<ul>
<li><a href="#tabs-1">tab-1</a></li>
<li><a href="index.jsp">tab-2</a></li>
<li><a href="index.html">tab-3</a></li>
</ul>
<div id="tabs-1">tabs-1-panel</div>
</div>
js调用:
$('#tabs').tabs({event:'mouseover'});
例子4: 添加选项卡:
<input type="button" value="添加选项卡" onclick="addTab()">
<div id="tabs">
<ul>
<li><a href="#tabs-1">tab-1</a></li>
<li><a href="index.jsp">tab-2</a></li>
<li><a href="index.html">tab-3</a></li>
</ul>
<div id="tabs-1">tabs-1-panel</div>
</div>
js调用:
$('#tabs').tabs();
var tabCount =4;
function addTab(){
tab.tabs('add',{
title:'tab-'+tabCount+'',
href:'#tab-'+tabCount+'',
content:'Tab----'+tabCount+'',
iconCls:true
});
tabCount++;
}
总结:
通过不同的Id调用,就可以创建不同的tab结构,样式则通过id来自定义不同的样式即可。
http://www.bkjia.com/Javascript/995073.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/995073.htmlTechArticlejQuery插件学习之选项卡Tab 创建选项卡组件 使用方法: html结构 div id=tabs ul lia href=#tabs-1tab-1/a/li lia href=#tabs-2tab-2/a/li lia href=#tabs-3tab-3/a/li /...
怎用jQuery做选项卡界面
幸运的是, jQueryUI 使它们很容易实现。 下面是如何让它们迅速启动并正常运行。 HTML的基本结构如下: <div id="tab_wrapper"> <ul> <li><a href="#tab1">Tab 1</li> <li><a href="#tab2">Tab 2</li> </ul> <div id="tab1"> Tab 1 content here... </div1> <div id="tab2"> Tab 2 content here... </div1> </div>通过单一ID的div指定这些锚变成标签,标签的列表将会在网页选项卡显示。当用户单击链接时,它将选择该选项卡。 只有短短的一行jQuery代码可以把这个HTML转换为选项卡式界面: $(function() { $( "#tab_wrapper" ).tabs(); });多简洁的代码! 我们甚至可以实现更进一步的功能。 该文档展示了较全功能 ,但我认为最有用的还是从外部来源加载数据。 通过使用的锚点到另一个页面的ID,而不是屏幕上一个项目,点击选项卡时它会自动加载资源,内容将通过AJAX加载。
本文由澳门新葡亰网址大全发布于网络时代,转载请注明出处:jQuery-简单选项卡,jquery-选项卡
关键词: