jQuery-简单选项卡，jquery-选项卡_澳门新葡亰网址大全

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结构

<ul>

</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();

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

关键词：

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