1 <%@ page language="java" contentType="text/html; charset=UTF-8"
2 pageEncoding="UTF-8"%>
3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4 <html>
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
7 <script type="text/javascript" src="${pageContext.request.contextPath}/jslib/jquery-1.11.1.min.js"></script>
8 <title>Insert title here</title>
9 <style type="text/css">
10 #sidebar-tab{border:1px solid #ccf;margin-bottom:1.5em;overflow:hidden;}
11 #tab-title h3{color:#666;font-size:15px;font-weight:400;}
12 #tab-title .selected{color:#356aa0;border-bottom:0px;} /*标题被选中时的样式*/
13 #tab-title span{padding:5px 9px 5px 10px;border:1px solid #ccf;border-right:0px;margin-left:-1px;cursor:pointer;}
14 #tab-content .hide{display:none;} /*默认让第一块内容显示，其余隐藏*/
15 #tab-content ul{padding:5px 10px;overflow:hidden;}
16 #tab-content ul li{padding-top:5px;height:20px;}
17 </style>
18 <script type="text/javascript">
19 $(function(){
20 $(‘#tab-title span‘).click(function(){
21 $(this).addClass("selected").siblings().removeClass();//removeClass就是删除当前其他类；只有当前对象有addClass("selected")；siblings()意思就是当前对象的同级元素，removeClass就是删除；
22 $("#tab-content > ul").hide().eq($(‘#tab-title span‘).index(this)).show();
23 });
24 });
25 </script>
26 </head>
27
28 <body>
29 <div id="sidebar-tab">
30 <div id="tab-title">
31 <h3><span class="selected">最新评论</span><span>近期热评</span><span>随机文章</span></h3>
32 </div>
33 <div id="tab-content">
34 <ul><li>1234567890-1</li></ul>
35 <ul class="hide"><li>1234567890-2</li></ul>
36 <ul class="hide"><li>1234567890-3</li></ul>
37 </div>
38 </div>
39 </body>
40 </html>
在三者几间切换
时间： 2024-12-21 20:14:39