前端选项卡面板

发布时间：2020-06-15 06:58:39 作者：matengbing
来源：网络阅读：369

重要的是对于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">
   
   <style type="text/css">
       h2{
           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">
   <h2>简洁jQuery滑动门插件单击切换演示</h2>
    <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>

    <h2>简洁jQuery滑动门插件鼠标滑过切换演示</h2>
    <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>
前端选项卡面板

前端选项卡面板

相关阅读