菜单

Tab页签切换,tab

2018年12月17日 - Bootstrap
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>Bootstrap js</title>

    <!-- 新 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet"  >

  <!-- 可选的Bootstrap主题文件(一般不用引入) -->
  <link rel="stylesheet"  >

  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>

     <div >
       <div >
        <div >
          <H4>Tab页</H4>
          <ul >
            <li ><a   data-toggle="tab">tab1</a></li>
            <li><a   data-toggle="tab">tab2</a></li>
            <li><a   data-toggle="tab">tab3</a></li>
            <li><a   data-toggle="tab">tab4</a></li>
          </ul>
          <div >
            <div id="tab1" >tab1</div>
            <div id="tab2" >tab2</div>
            <div id="tab3" >tab3</div>
            <div id="tab4" >tab4</div>
          </div>
        </div>
      </div><!-- end of row -->
    </div>
</body>
</html>

Tab页签切换,tab

  无需手工编制代码,需要更进一步和睦之页面修改tab样式

js之tab页签切换效果

      现在web网站,很多地都急需为此到tab页签。     示例:        
$(document).ready(function(){               var curIndex;              
var $lis = $(“.active-hd li”);               var $divs = $(“.active-bd
div”);               // 为各种一个tab页签li绑定click事件            
 $lis.on(“click”,function(){                     curIndex =
$(this).index();                  
 $(this).addClass(“selected”).siblings().removeClass(“selected”);      
             $divs.eq(index).show().siblings().hide();              });
       });   转车来自: 微笑的mvp_lin

http://www.bkjia.com/jQuery/1055779.htmlwww.bkjia.comtruehttp://www.bkjia.com/jQuery/1055779.htmlTechArticleTab页签切换,tab js之tab页签切换效果
现在web网站,很多地且亟待为此到tab页签。 示例:
$(document).ready(function(){ var curIndex; var $lis =
$(“.active-hd…


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图