zoukankan      html  css  js  c++  java
  • JTabs控件

    效果:

    代码:

     1 /*tab*/
     2 .tabs
     3 {
     4     display: block;
     5     width: 100%;
     6     margin: 0px;
     7     padding-left: 0px;
     8     text-align: center;
     9 }
    10 .tabs li
    11 {
    12     list-style: none;
    13     float: left;
    14     position: relative;
    15     top: 1px;
    16     margin: 0 .2em 0 0;
    17     border-bottom: 0;
    18     padding:0;
    19     border: 1px solid #11a3ff;
    20 }
    21 .tabs li.selected
    22 {
    23     border-bottom: 1px solid #fff;
    24 }
    25 .tabs li a
    26 {
    27     display: block;
    28     padding: .5em 1em;
    29     text-decoration: none;
    30 }
    31 .content
    32 {
    33     clear:both;
    34     margin:0px;
    35     border:1px solid #11a3ff;
    36 }
    37 .hide
    38 {
    39     display:none;
    40 }
     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4     <title></title>
     5     <link href="Style/site.css" rel="stylesheet" type="text/css" />
     6 
     7     <script src="Script/jquery.min.js" type="text/javascript"></script>
     8 
     9     <script src="Script/JTabs.min.js" type="text/javascript"></script>
    10 
    11     <script type="text/javascript">
    12         $(function() { $("#tabs").jTabs(); });
    13     </script>
    14 
    15 </head>
    16 <body>
    17     <div style=" 220px;">
    18         <ul id="tabs">
    19             <li><a href="#A">A</a></li>
    20             <li><a href="#B">B</a></li>
    21             <li><a href="#C">C</a></li>
    22         </ul>
    23         <div id="A">
    24             <p>
    25                 Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec
    26                 arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante.
    27                 Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper
    28                 leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales
    29                 tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel
    30                 pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum.
    31                 Nunc tristique tempus lectus.</p>
    32         </div>
    33         <div id="B">
    34             <p>
    35                 Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra
    36                 massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget
    37                 luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean
    38                 aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent
    39                 in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat
    40                 nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque
    41                 convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod
    42                 felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
    43         </div>
    44         <div id="C">
    45             <p>
    46                 Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate,
    47                 pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem.
    48                 Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia
    49                 nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo
    50                 pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem
    51                 enim, pretium nec, feugiat nec, luctus a, lacus.</p>
    52         </div>
    53     </div>
    54 </body>
    55 </html>

    下载:

    JTabs.min.js

  • 相关阅读:
    ubuntu 11.10(32位系统)下编译android源码
    12 个基于 Rails 框架开发的 CMS 系统
    36 个 CSS 框架推荐
    再来 10 个新鲜的 HTML5 教程
    汇编程序开发环境搭配(转)
    推荐:介绍一个UndoFramework
    细数 Windows 平台上的 NoSQL 数据库
    使用ShareKit一键分享到Facebook,Twitter等平台
    25个jQuery的编程小抄
    10款iOS高效开发必备的ObjectiveC类库
  • 原文地址:https://www.cnblogs.com/kingge/p/2579913.html
Copyright © 2011-2022 走看看