jQuery的idTabS控件的使用

最新推荐文章于 2024-07-24 11:09:48 发布

weixin_30825581

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量99

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/liucyi/archive/2011/02/22/1961796.html

版权

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>jQuery idTabs</title>
    <style>
      * { margin:0; padding:0; border:0; outline:0; }
      body { font:25pt Tahoma; background:#FFF; color:#000; }
      .idTabs { margin:40px; }
      .idTabs ul { background:#222; padding:5px; float:left; }
      .idTabs li { list-style:none; /*Try deleting this float*/ float:left; }
      .idTabs a { display:block; background:#222; color:snow; padding:0 13px; font:bold 25pt Arial; text-decoration:none; }
      .idTabs a.selected { background:#FFF; color:#000; }
      .items>div { display:none; float:left; margin:0.1em 0 0 0.5em; }
      .idTabs ul, .idTabs a { border-radius:4px; -moz-border-radius:4px; }
    </style>
  </head>
  <body>
      <div class="items1">
        <div class="one">1111111111 to <b>idTabs</b>!</div>
        <div class="two">You 2222222222222 do anything with <b>idTabs</b>.</div>
        <div class="three">33333333333 at all.</div>
        <div class="four">The only limit,</div>
        <div class="four">is your imagination.</div>
      </div>
    <div class="idTabs">
      <ul>
        <li><a href="#one">1</a></li>
        <li><a href="#two">2</a></li>
        <!-- Try adding this <br/> tag here -->
        <li><a href="#three">3</a></li>
        <li><a href="#four">4</a></li>
      </ul>         
    </div>
    <div class="items2">
        <div class="one">1111111111 to <b>idTabs</b>!</div>
        <div class="two">You 2222222222222 do anything with <b>idTabs</b>.</div>
        <div class="three">33333333333 at all.</div>
        <div class="four">The only limit,</div>
        <div class="four">is your imagination.</div>
      </div>
    <script src="jquery.js"></script>
    <script src="jquery.idTabs.js"></script>
    <script>
     $(".idTabs").idTabs("!mouseover");
    </script>
  </body>
</html>

转载于:https://www.cnblogs.com/liucyi/archive/2011/02/22/1961796.html

weixin_30825581

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的idTabS控件的使用

<!doctype html><html lang="en"> <head> <meta charset="utf-8"/> <title>jQuery idTabs</title> <style> * { margin:0; padding:0; bord...
复制链接

扫一扫