本文共 3875 字，大约阅读时间需要 12 分钟。
重要的是对于js函数的使用
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'test12.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <style type="text/css"> h1{ color:#2d55f4; } body,ul,li{ margin: 0; padding: 0; font-size:12px; list-style: none; } a{ text-decoration: none;color: #000;font-size: 14px; } #tabbox{ width:600px; overflow:hidden; margin:0 auto;} .tab_conbox{border: 1px solid #999;border-top: none;} .tab_con{ display:none;} .tabs{height: 32px;border-bottom:1px solid #999;border-left: 1px solid #999;width: 100%;} .tabs li{height:31px;line-height:31px;float:left;border:1px solid #999;border-left:none;margin-bottom: -1px;background: #e0e0e0;overflow: hidden;position: relative;} .tabs li a {display: block;padding: 0 20px;border: 1px solid #fff;outline: none;} .tabs li a:hover {background: #ccc;} .tabs .thistab,.tabs .thistab a:hover{background: #fff;border-bottom: 1px solid #fff;} .tab_con {padding:12px;font-size: 14px; line-height:175%;} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $.jqtab = function(tabtit,tab_conbox,shijian) { $(tab_conbox).find("li").hide(); //隐藏所有选项卡li标签 $(tabtit).find("li:first").addClass("thistab").show(); //只显示导航栏第一个li标签 $(tab_conbox).find("li:first").show(); //显示第一个li导航标签的li内容 /* * 给所有ul，li添加事件和效果*/ $(tabtit).find("li").bind(shijian,function(){ $(this).addClass("thistab").siblings("li").removeClass("thistab"); //给有事件发生的li添加class，兄弟节点去掉class var $index=$(tabtit).find("li").index(this); //得到有事件发生的li的下标 $(tab_conbox).find("li").eq($index).show().siblings("li").hide(); //根据得到的下标设置内容框对应下标的li显示 return false; //设置return false避免点击事件的调转 } ); }; /*调用方法如下：*/ $.jqtab("#tabs","#tab_conbox","click"); //第一个参数为导航栏ul的选择器，第二个参数为内容面板的选择器，第三个参数为事件 $.jqtab("#tabs2","#tab_conbox2","mouseenter"); }); </script> </head> <body> <div id="tabbox"> <h1>简洁jQuery滑动门插件 单击切换演示</h1> <ul class="tabs" id="tabs"> <li><a href="http://www.51xuediannao.com/js/nav/">导航菜单</a></li> <li><a href="http://www.51xuediannao.com/js/slide/">焦点幻灯片</a></li> <li><a href="http://www.51xuediannao.com/js/gg/">广告代码</a></li> <li><a href="http://www.51xuediannao.com/js/texiao/">网页特效</a></li> </ul> <ul class="tab_conbox" id="tab_conbox"> <li class="tab_con"> <p>1<span><a href="http://www.51xuediannao.com/">导航菜单</a></span></p> </li> <li class="tab_con"> <p>2<span><a href="http://www.51xuediannao.com/"></a>焦点幻灯片</span></p> </li> <li class="tab_con"> <p>3<span><a href="http://www.51xuediannao.com/"></a>广告代码</span></p> </li> <li class="tab_con"> <p>4<span><a href="http://www.51xuediannao.com/"></a>网页特效</span></p> </li> </ul> <h1>简洁jQuery滑动门插件 鼠标滑过切换演示</h1> <ul class="tabs" id="tabs2"> <li><a href="#/">导航菜单</a></li> <li><a href="#/">焦点幻灯片</a></li> <li><a href="#">广告代码</a></li> <li><a href="#/">网页特效</a></li> </ul> <ul class="tab_conbox" id="tab_conbox2"> <li class="tab_con"> <p>1<span><a href="#/">导航菜单</a></span></p> </li> <li class="tab_con"> <p>2<span><a href="#/">焦点幻灯片</a></span></p> </li> <li class="tab_con"> <p>3<span><a href="#/">广告代码</a></span></p> </li> <li class="tab_con"> <p>4<span><a href="#/">网页特效</a></span></p> </li> </ul> </div> </body> </html>
本文转自 matengbing 51CTO博客，原文链接:http://blog.51cto.com/matengbing/1866316
转载地址：http://dmnbo.baihongyu.com/