码迷,mamicode.com
首页 > Web开发 > 详细

同一网页间信息的随意切换

时间:2016-04-16 02:01:15      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:

 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>

技术分享

在三者几间切换

同一网页间信息的随意切换

标签:

原文地址:http://www.cnblogs.com/xiadongqing/p/5397445.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!