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

  • 相关阅读:
    ASP.NET提供文件下载函数
    web.config access数据库相对路径设置方法 for asp.net2.0
    MSDE安装后身份验证自动是windows验证,osql命令中修改为sqlserve身份验证或混合验证呢及注冊表修改方法
    关于ASP.NET IIS的注册:
    指定datagrid编辑框的宽度及相映属性(转)备用
    TransparentListBox
    在dll中使用FastReport会遇到以下内个问题
    值得学习一
    注册表恢复默认共享
    有关dnn的安装不成功问题
  • 原文地址:https://www.cnblogs.com/kingge/p/2579913.html
Copyright © 2011-2022 走看看