tab.rar

  • PUDN用户
    了解作者
  • Java
    开发工具
  • 870KB
    文件大小
  • rar
    文件格式
  • 0
    收藏次数
  • 10 积分
    下载积分
  • 5
    下载次数
  • 2014-10-28 17:00
    上传日期
基于CSS3+JQuery制作实现的一款简单的Tab选项卡,采用圆滑边角的风格设计,既简洁又漂亮,且兼容IE8及以上浏览器,有需要网页选项卡的朋友不妨下载本源码。
tab.rar
  • tab
  • images
  • Angus Deluxe.png
    244KB
  • header_tabs.png
    1.4KB
  • Angus Chipotle BBQ Bacon.png
    332.1KB
  • bg_tile.jpg
    10.7KB
  • Quarter Pounder with Cheese.png
    218.9KB
  • js
  • jquery-1.7.min.js
    91.9KB
  • tab.JPG
    43.6KB
  • Thumbs.db
    9.5KB
  • tab.html
    3.7KB
内容介绍
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>tab</title> <style> body{ background:url(images/bg_tile.jpg); margin:0; padding:0; } .container{ background:url(images/bg_tile.jpg); width:800px; height:534px; margin:50px auto 0; } .menu{ width:800px; height:34px; } ul{ list-style:none; width:720px; height:34px; margin:0 auto; } .menu li{ background:url(images/header_tabs.png) repeat-x; background-position:214px 0; display:block; float:left; width:215px; height:34px; cursor:pointer; } .menu li.current{ background-position:0 0; } .menu span{ font:bold 22px Verdana, Geneva, sans-serif; color:#FFE; display:block; line-height:34px; text-align:center; text-shadow:2px 2px 2px #666; letter-spacing:4px; } .current span{ color:#666; text-shadow:2px 2px 2px #FFF; } .content{ background:#F9F9F9; width:800px; height:500px; border-radius:12px; box-shadow:6px 6px 6px rgba(0,0,0,0.6); } .content ul{ width:760px; height:500px; list-style:none; } .content li{ float:left; width:800px; height:500px; margin-left:-40px; display:block; } .content img{ float:left; width:400px; margin:20px 30px; } .info{ float:left; width:300px; margin:20px 0; height:auto; } .info p{ font:bold 24px Verdana, Geneva, sans-serif; color:#999; display:block; line-height:34px; text-align:center; } .clear{ clear:both; } </style> <script src="js/jquery-1.7.min.js"></script> <script> $(function(){ $(".info p").each(function(){ var txt = $(this).parent().siblings().attr("src"); $(this).html(txt); }) $(".menu li").click(function(){ var index = $(this).index(); $(this).addClass("current").siblings().removeClass("current"); $(".content li").eq(index).show().siblings().hide(); }) }) </script> </head> <body> <div class="container"> <div class="menu"> <ul> <li class="current"><span>one</span></li> <li><span>two</span></li> <li><span>three</span></li> </ul> </div> <div class="content"> <ul> <li> <div class="info"><p></p></div> </li> <li style="display:none"> <div class="info"><p></p></div> </li> <li style="display:none"> <div class="info"><p></p></div> </li> </ul> </div> </div> <!-- 底岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩弧 岱 埭 鎢 乾 疑 氪 岱 怪岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩戕 岱 岱 岱 枑鼎埭鎢楷票迵狟婥 岱 岱 岱 岱 http://www.codefans.net 岱 岱 岱 岱 誑翑﹜煦砅﹜枑詢 岱 彿岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩岩忽 --> </body> </html>
评论
    相关推荐
    • tab.zip
      javascript仿浏览器页面标签切换的TAB选项卡代码
    • Tab.zip
      Tab 标签切换,可左右滑动切换视图。简单的方法实现的Tab配合ViewPager滑动。
    • TAB.rar
      CXTabCtrl an easier tab control for dialogs and forms
    • Tab.zip
      简单使用VC中的Tab控件,简单大方,思路清晰,看过之后,很快就会使用
    • tab.zip
      点击 TabBar 上的“更多”按钮时,会出现另外一条TabBar,显示更多隐藏的按钮。可用于TabBar上按钮过多的情况。
    • tab切换效果.rar
      android 页面切换例子(tab切换效果)
    • tab.rar
      tab栏切换效果,基于bootstrap,jq
    • TAB.rar
      在同一个页面应用多种TAB的综合实例,可在一个页面中同时布局选项卡,也布局滑动门,或者是二者兼顾。这个问题以前用户就提到过,不知如何在同一页面布置多个选项卡,你可以参考一下这个。  1、支持一个页面多次...
    • TAB.rar
      完成不同功能的网页Tab,滑动门和选项卡,选项卡功能和使用说明:  1、支持一个页面多次引用;  2、一次引用实现多次切换;  3、点击/滑过等切换方式自定义;  4、自动播放+鼠标动作切换;  5、自动...
    • sendmail.8.10.0.Beta10.tar.Z
      被广泛使用的发送邮件(SMTP)服务器