前端选项卡面板

简介:

重要的是对于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() {(document).ready(function() {.jqtab = function(tabtit,tab_conbox,shijian) {
        (tabconbox).find("li").hide();//li(tabtit).find("li:first").addClass("thistab").show();  //只显示导航栏第一个li标签
        (tabconbox).find("li:first").show();//lili/ulli/(tabtit).find("li").bind(shijian,function(){
            (this).addClass("thistab").siblings("li").removeClass("thistab");//liclassclassvarindex=(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>
wKiom1gRq67yL4opAABiw_9VzRo988.png-wh_50



 本文转自 matengbing 51CTO博客,原文链接:http://blog.51cto.com/matengbing/1866316

目录
打赏
0
0
0
0
344
分享
相关文章
|
9月前
|
前端 CSS 经典:弧形边框选项卡
前端 CSS 经典:弧形边框选项卡
332 0
前端框架Layui实现动态选项卡&iframe使用(附源码)
前端框架Layui实现动态选项卡&iframe使用(附源码)
1321 0
前端学习笔记202304学习笔记第十九天-vue3.0-了解可视化面板左侧菜单
前端学习笔记202304学习笔记第十九天-vue3.0-了解可视化面板左侧菜单
67 0
前端|不用JS就能实现的选项卡
前端|不用JS就能实现的选项卡
134 0
前端知识学习案例6vs code-git面板
前端知识学习案例6vs code-git面板
68 0
前端知识学习案例6vs code-git面板
Bootstrap响应式前端框架笔记十五——面板与井
Bootstrap响应式前端框架笔记十五——面板与井
170 0
Bootstrap响应式前端框架笔记十五——面板与井
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
本文对比测试了通义千文、文心一言、智谱和讯飞等多个国产大模型在处理基础计数问题上的表现,特别是通过链式推理(COT)提示的效果。结果显示,GPTo1-mini、文心一言3.5和讯飞4.0Ultra在首轮测试中表现优秀,而其他模型在COT提示后也能显著提升正确率,唯有讯飞4.0-Lite表现不佳。测试强调了COT在提升模型逻辑推理能力中的重要性,并指出免费版本中智谱GLM较为可靠。
126 0
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    12
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    38
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    3
  • 4
    详解智能编码在前端研发的创新应用
    14
  • 5
    巧用通义灵码,提升前端研发效率
    19
  • 6
    智能编码在前端研发的创新应用
    34
  • 7
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    8
  • 8
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    31
  • 9
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    11
  • 10
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    21
  • 1
    开箱即用的GO后台管理系统 Kratos Admin - 前端权限
    3
  • 2
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    34
  • 3
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    64
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    29
  • 5
    巧用通义灵码,提升前端研发效率
    94
  • 6
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    147
  • 7
    详解智能编码在前端研发的创新应用
    100
  • 8
    智能编码在前端研发的创新应用
    83
  • 9
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    40
  • 10
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    128