jQuery-简单选项卡,jquery-选项卡

2019-11-26 作者:网络时代   |   浏览(180)

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-选项卡

关键词: