jquery web 实现网页选项卡

最新推荐文章于 2024-08-04 20:38:28 发布

1°叁柒

最新推荐文章于 2024-08-04 20:38:28 发布

阅读量1.3k

点赞数

文章标签： jquery web stylesheet class html border

本文链接：https://blog.csdn.net/zhu_nana/article/details/8025119

版权

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
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 'index.jsp' starting page</title>

<style type="text/css">
  ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px;
line-height: 31px;
border: 1px solid #999;
border-left: none;
margin-bottom: -1px;
overflow: hidden;
position: relative;
background: #e0e0e0;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
border: 1px solid #fff;
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover {
background: #fff;
border-bottom: 1px solid #fff;
}
.tab_container {
border: 1px solid #999;
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #fff;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}

</style>
<script type="text/javascript" src = "JS/jquery-1[1].3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".tab_content").hide();   <%--将表格内容隐藏--%>
$("ul.tabs li:first").addClass("active").show(); <%--将表格内容添加样式--%>
$(".tab_content:first").show();
$("ul.tabs li").click(function() {   <%--判断用户是否单击的某选项卡--%>
$("ul.tabs li").removeClass("active");   <%--移除样式--%>
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
});
</script>
</head>

<body>
<ul class="tabs">
    <li><a href="#tab1">娱乐</a></li>
    <li><a href="#tab2">体育</a></li>
    <li><a href="#tab3">新闻</a></li>
</ul>
<div class="tab_container">
    <div id="tab1" class="tab_content">
        娱乐
    </div>
    <div id="tab2" class="tab_content">
       体育
    </div>
      <div id="tab3" class="tab_content">
       新闻
    </div>
</div>

</body>
</html>

1°叁柒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery web 实现网页选项卡

String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%> "> My JSP 'index.jsp' sta
复制链接

扫一扫