tab.rar

  • babi123
    了解作者
  • HTML
    开发工具
  • 60KB
    文件大小
  • rar
    文件格式
  • 0
    收藏次数
  • 1 积分
    下载积分
  • 0
    下载次数
  • 2020-03-05 16:55
    上传日期
tab栏切换效果,基于bootstrap,jq
tab.rar
  • js
  • jquery-1.11.0.min.js
    94.1KB
  • bootstrap.min.js
    36KB
  • css
  • bootstrap.min.css
    118.4KB
  • index.html
    4.4KB
内容介绍
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap选项卡美化Tabs特效</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> .demo{ background: #d57d7d;padding: 1.5em 0; } a:hover,a:focus{ outline: none; text-decoration: none; } .tab .nav-tabs{ position: relative; border-bottom: 0 none; } .tab .nav-tabs li{ text-align: center; } .tab .nav-tabs li a{ display: block; height: 70px; line-height: 65px; background: linear-gradient(165deg, transparent 29%, #908a78 30%); font-size: 15px; font-weight: 600; color: #fff; text-transform: uppercase; margin-right: 0; border-radius: 0; border: none; position: relative; transition: all 0.5s ease 0s; } .tab .nav-tabs li.active a, .tab .nav-tabs li a:hover{ background: linear-gradient(165deg, transparent 29%, #efe8d5 30%); border: none; color: #908a78; } .tab .nav-tabs li a:before{ content: ""; height: 70px; line-height: 90px; border-bottom: 70px solid rgba(0, 0, 0, 0.1); border-right: 10px solid transparent; position: absolute; top: 0; left: 100%; z-index: 1; } .tab .nav-tabs li:last-child a:before{ border: none; } .tab .tab-content{ font-size: 14px; color: #6f6c6c; line-height: 26px; background: #efe8d5; padding: 20px; } .tab .tab-content h3{ font-size: 24px; color: #6f6c6c; margin-top: 0; } .tab .tab-content p{ margin-bottom: 0; } @media only screen and (max-width: 480px){ .tab .nav-tabs li{ width: 100%; margin-bottom: 8px; } .tab .nav-tabs li:last-child{ margin-bottom: 0; } .tab .nav-tabs li a:before{ border: none; } } </style> </head> <body> <div class="demo"> <div class="container"> <div class="row"> <div class="col-md-offset-3 col-md-6"> <div class="tab" role="tabpanel"> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#Section1" aria-controls="home" role="tab" data-toggle="tab" rel='nofollow' onclick='return false;'>Section 1</a></li> <li role="presentation"><a href="#Section2" aria-controls="profile" role="tab" data-toggle="tab" rel='nofollow' onclick='return false;'>Section 2</a></li> <li role="presentation"><a href="#Section3" aria-controls="messages" role="tab" data-toggle="tab" rel='nofollow' onclick='return false;'>Section 3</a></li> </ul> <!-- Tab panes --> <div class="tab-content tabs"> <div role="tabpanel" class="tab-pane fade in active" id="Section1"> <h3>Section 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros consectetur lobortis. Maecenas nec nibh congue, placerat sem id, rutrum velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt, imperdiet orci semper, rhoncus ligula. Vivamus scelerisque.</p> </div> <div role="tabpanel" class="tab-pane fade" id="Section2"> <h3>Section 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros consectetur lobortis. Maecenas nec nibh congue, placerat sem id, rutrum velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt, imperdiet orci semper, rhoncus ligula. Vivamus scelerisque.</p> </div> <div role="tabpanel" class="tab-pane fade" id="Section3"> <h3>Section 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec urna aliquam, ornare eros vel, malesuada lorem. Nullam faucibus lorem at eros consectetur lobortis. Maecenas nec nibh congue, placerat sem id, rutrum velit. Phasellus porta enim at facilisis condimentum. Maecenas pharetra dolor vel elit tempor pellentesque sed sed eros. Aenean vitae mauris tincidunt, imperdiet orci semper, rhoncus ligula. Vivamus scelerisque.</p> </div> </div> </div> </div> </div> </div> </div> <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script> <script src="js/bootstrap.min.js"></script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div> </body> </html>
评论
    相关推荐
    • tab.rar
      通过tab实现三个菜单的切换,具有滑动效果。希望大家喜欢
    • tab.zip
      javascript仿浏览器页面标签切换的TAB选项卡代码
    • TabDialog.zip
      VC++TabDialog对话框源码,浮动在屏幕的最上方,鼠标放上后显示,移走后隐藏起来,仅显示一个小工具条的样式,可创建多个TAb标签,每个都可以关闭,就好是将对话框“钉”在屏幕上一样。
    • Tab控件的使用 MFCTabCtrl.rar
      TAB控件:Tab控件的使用 MFCTabCtrl
    • Tab.zip
      Tab 标签切换,可左右滑动切换视图。简单的方法实现的Tab配合ViewPager滑动。
    • TAB.rar
      CXTabCtrl an easier tab control for dialogs and forms
    • tab切换效果.rar
      android 页面切换例子(tab切换效果)
    • tab.rar
      动态向TabCtrl中增加工具条的功能,并实现单击响应事件VC
    • TAB.rar
      在同一个页面应用多种TAB的综合实例,可在一个页面中同时布局选项卡,也布局滑动门,或者是二者兼顾。这个问题以前用户就提到过,不知如何在同一页面布置多个选项卡,你可以参考一下这个。  1、支持一个页面多次...
    • googlemap(demo).rar
      javascript操作GOOGLEMAP地图所有演示程序