WORKS作品

• 鼠标滑过(hover)选项卡(TAB)效果代码

  2008-06-15

  版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
  http://shipin.blogbus.com/logs/22951374.html
  
  

  继上一篇〈Ajax Libraries API框架集代码〉的介绍之后，我们便开始实践一下如何使用它。

  这次介绍的鼠标滑过(hover)选项卡(TAB)效果代码基于jquery技术，兼容各大浏览器。很简单的一段代码就能帮你完成--当鼠标滑过标签显示不同标签下的内容的选项卡效果。
  范例：鼠标滑过(hover)选项卡(TAB)效果代码

  用在大巴上的步骤如下:
  1.进入后台“模板设置”页面，自定义模板下的head代码块中粘贴下面代码：

  <script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", "1");</script>
  <script type="text/javascript">
  $(document).ready(function(){
   $("#tab div").hide().filter(":first").show();
   $("div#tab .opts a").hover(function () {
    $("#tab div").hide();
    $("#tab div").filter($(this).attr("href")).show();
    $("#tab .opts a").removeClass("selected");
   }, function() {
    $(this).addClass("selected");
    return false;
   }).filter(":first").addClass("selected");
  });
  </script>

  2.在css代码块中粘贴下面代码：

  /*---TAB---*/
  div#tab {width: 338px; margin: 30px auto; text-align: left;}
  div#tab ul.opts li {display: block; float: left; margin: 0 14px;}
  .opts .help {width: 53px; background: url(http://www.cnweblog.com/images/cnweblog_com/ipopzone/shipin/help.gif) 0 20% no-repeat;}
  .opts .share {width: 66px; background: url(http://www.cnweblog.com/images/cnweblog_com/ipopzone/shipin/share.gif) 0 20% no-repeat;}
  .opts .roll {width: 53px; background: url(http://www.cnweblog.com/images/cnweblog_com/ipopzone/shipin/roll.gif) 0 20% no-repeat;}
  .opts .love {width: 53px; background: url(http://www.cnweblog.com/images/cnweblog_com/ipopzone/shipin/love.gif) 0 20% no-repeat;}
  .opts .blk {height: 15px; display: block;}
  .opts li a.selected, .opts li a:hover {border-bottom: 5px solid #fa68bb;}
  .opts li a span {display: none;}
  div#tab #help, #share, #roll, #love {padding: 10px; width: 318px; border-top: 1px solid #fa68bb; border-bottom: 1px solid #fa68bb;}
  

  3.在index代码块中粘贴下面代码：

  <div id="tab">
   <ul class="opts">
    <li><a class="help blk" href="#help" title="HELP教程"><span>HELP</span></a></li>
    <li><a class="share blk" href="#share" title="SHARE分享"><span>SHARE</span></a></li>
    <li><a class="love blk" href="#love" title="LOVE公益"><span>LOVE</span></a></li>
    <li><a class="roll blk" href="#roll" title="ROLL互动"><span>ROLL</span></a></li>
   </ul>
   <br class="clr" />
      
   <div id="help">
   <h2>教程</h2>
    <ul><li>教程1:<a href="#">内容内容内容内容内容</a></li><li>教程2:<a href="#">内容内容内容内容内容</a></li></ul>
   </div>
   <div id="share">
   <h2>分享</h2>
    <ul><li>分享1:<a href="#">内容内容内容内容内容</a></li><li>分享2:<a href="#">内容内容内容内容内容</a></li></ul>
   </div>
   <div id="love">
   <h2>公益</h2>
    <ul><li>公益1:<a href="#">内容内容内容内容内容</a></li><li>公益2:<a href="#">内容内容内容内容内容</a></li></ul>
   </div>
   <div id="roll">
   <h2>互动</h2>
    <ul><li>互动1:<a href="#">内容内容内容内容内容</a></li><li>互动2:<a href="#">内容内容内容内容内容</a></li></ul>
   </div>
  </div>
  

  上面的代码只是个范例,有几个重点要注意,就是id=""里面的值可以改但是要注意href="#??"里面的值要对的上id=""里面的值,"#"要保留.

  
  

  随机文章：

  规定时间内显示*隐藏浮动层效果代码 2008-06-29

  超链接按类型加样式效果代码 2008-06-22

  鼠标点击(click)选项卡(TAB)效果代码 2008-06-15

  发布日期纵向效果代码 2008-05-08

  评论双样式效果代码 2008-05-03

  
  收藏到：Del.icio.us

  
  
  
  
  

  Tags: Javascript CSS

  引用: