[封装插件]使用Jquery制作一个标签页的效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Jquery实现鼠标滑动到页面上就显示那些固定内容</title> <!--百度在线压缩地址--> <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script> <style> *{ margin:0; padding:0; } .menu{ height: 50px; background: #2b2b2b; color: white; } .menu ul li{ float: left; margin-left:15px; list-style: none; line-height: 50px; width: 80px; text-align: center; } /*把菜单栏第一个选项设置默认选中*/ .menu ul li:first-child{ /*background:red;*/ } .menu ul li:hover{ background: red; /*鼠标点击后变为一只手*/ cursor:pointer; } .info{ background: #cbcbcb; height: 100px; } /*把内容区域全部设置为不显示*/ .info p{ display: none; } /*然后选中第一个设置显示*/ .info p:first-child{ display: block; } </style> </head> <body> <div class="menu"> <ul> <li>Jquery</li> <li>JavaScript</li> <li>JAVA</li> </ul> </div> <div class="info"> <p> this is Jquery --------> this is Jquery --------> this is Jquery --------> this is Jquery --------> this is Jquery --------> this is Jquery --------> this is Jquery --------> this is Jquery --------> this is Jquery --------> this is Jquery --------> this is Jquery --------> <span>span 标签A</span> </p> <p> this is JavaScript --------> this is JavaScript --------> this is JavaScript --------> this is JavaScript --------> this is JavaScript --------> this is JavaScript --------> this is JavaScript --------> this is JavaScript --------> this is JavaScript --------> <span>span 标签B</span> </p> <p> this is JAVA --------> this is JAVA --------> this is JAVA --------> this is JAVA --------> this is JAVA --------> this is JAVA --------> this is JAVA --------> this is JAVA --------> this is JAVA --------> this is JAVA --------> this is JAVA --------> this is JAVA --------> </p> </div> <script> //首先 我们要把初始的第一个选项的背景色设置为指定颜色 $(".menu ul li").eq(0).css({"background" :"red"}); //我们要先给元素绑定一个鼠标移动到上边就调用的事件,在这里也可以用hover提到mouseecter $(".menu ul li").mouseenter( function(){ //设置选中的选项背景色为红色 $(this).css({"background":"red"}); //设置其他没有被选中的颜色为原本的颜色,使用CSS方法的时候可以传入用 : 分开的, 也可以传入用 , 分开的 // 不同的是,用:分开的前面可以是不加 "" 引号来框住的,而用 , 逗号两边都必须用 "" 引号框住,或者属性中包含 - 的话也是必须用 "" 框柱 //使用 , 逗号来分割的必须两边都加上"" 引号,或者是左边加引号右边不加, 但是这样必须保证外边有{ }一对大括号,表示处在一个JSON对象中才可以; JSON对象可以同时设置多个CSS属性 $(".menu ul li").not($(this)).css("background","#2b2b2b"); //获取事件发生时的元素的索引; idx = $(this).index(".menu ul li"); //使用eq方法匹配索引为idx的元素,并使用show()方法让他显示出来 // $($(".info p").get(idx)).show(); $(".info p").eq(idx).show(); //使用not(索引)方法匹配到除了选中的元素的其他元素,用hide设置为不显示 $(".info p").not($(".info p").eq(idx)).hide(); } ) </script> </body> </html>
使用bootstarp配合JS制作标签页效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--匹配移动端--> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>创建一个标签页</title> <!--安装bootstrap--> <!--第一步必须先引入:jquery.js, bootstarp引入之前必须先引入1.9以上版本的jquery,因为bootstarp是简历在jquery基础上的--> <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <!--生成占位图--> <script src="../../bs/js/holder.js"></script> <!--css--> <link rel="stylesheet" href="../../bs/css/bootstrap.css"> <!--bootstrap.js--> <script src="../../bs/js/bootstrap.js"></script> <style> /*首先我们把所有的row都隐藏*/ .row{ display: none; margin:15px; color: red; } </style> </head> <body> <div class="container"> <!--ul加上nav nav-tabs 就表示这是一个标签页--> <h1 class="page-header">标签页案例</h1> <ul class="nav nav-tabs"> <!--这里的active表示以选中的类--> <li role="presentation" class="active"><a href="#">linux</a></li> <li role="presentation"><a href="#">java</a></li> <li role="presentation"><a href="#">PHP</a></li> </ul> <div class="row"> <p>Linux is very much!Linux is very much!Linux is very much!Linux is very much!Linux is very much! Linux is very much!Linux is very much!Linux is very much!Linux is very much!Linux is very much! Linux is very much!Linux is very much!Linux is very much!Linux is very much!Linux is very much! Linux is very much!Linux is very much!Linux is very much!Linux is very much!Linux is very much! Linux is very much!Linux is very much!Linux is very much!Linux is very much!Linux is very much!</p> </div> <div class="row"> <p>JAVA is very much!JAVA is very much!JAVA is very much!JAVA is very much!JAVA is very much! JAVA is very much!JAVA is very much!JAVA is very much!JAVA is very much!JAVA is very much!JAVA is very much! JAVA is very much!JAVA is very much!JAVA is very much!JAVA is very much!JAVA is very much!JAVA is very much! JAVA is very much!JAVA is very much!JAVA is very much!JAVA is very much!JAVA is very much!JAVA is very much! JAVA is very much!JAVA is very much!</p> </div> <div class="row"> <p>PHP is very much!PHP is very much!PHP is very much!PHP is very much!PHP is very much! PHP is very much!PHP is very much!PHP is very much!PHP is very much!PHP is very much!PHP is very much! PHP is very much!PHP is very much!PHP is very much!PHP is very much!PHP is very much!PHP is very much! PHP is very much!PHP is very much!PHP is very much!PHP is very much!PHP is very much!PHP is very much! PHP is very much!PHP is very much!</p> </div> </div> </body> <script> $("li").mouseenter(function(){ $(this).addClass("active"); $("li").not($(this)).removeClass("active"); //再移动到上边的时候生成索引 index = $(this).index(); $(".row").eq(index).show(); $(".row").not($(".row").eq(index)).hide(); }); //把第一个显示出来 $(".row :first").show(); </script> </html>
使用Bootstarp官方封装标签页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--匹配移动端--> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>导航条</title> <!--安装bootstrap--> <!--第一步必须先引入:jquery.js, bootstarp引入之前必须先引入1.9以上版本的jquery,因为bootstarp是简历在jquery基础上的--> <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <!--生成占位图--> <script src="../bs/js/holder.js"></script> <!--css--> <link rel="stylesheet" href="../bs/css/bootstrap.css"> <!--bootstrap.js--> <script src="../bs/js/bootstrap.js"></script> </head> <body> <div class="container"> <h1 class="page-header">Bootstarp官方封装标签页效果</h1> <!-- Nav tabs --> <ul class="nav nav-pills" role="tablist"> <li class="active"><a href="#java" data-toggle="tab">JAVA</a></li> <li><a href="#php" aria-controls="messages" role="tab" data-toggle="tab">PHP</a></li> <li><a href="#html" aria-controls="settings" role="tab" data-toggle="tab">HTML</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active fade in" id="java">java is very much!java is very much!java is very much!java is very much!</div> <div class="tab-pane fade" id="php">php is very much!php is very much!php is very much!php is very much!</div> <div class="tab-pane fade" id="html">html is very much!html is very much!html is very much!html is very much!</div> </div> </div> </body> </html>