tab选项卡
1 <!doctype html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>tab切换</title>
6 <link type="text/css" rel="stylesheet" href="css/tabc.css">
7 <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
8 <script type="text/javascript" src="js/tabj.js"></script>
9
10 </head>
11 <body>
12 <div class="wrap">
13
14 <div class="top">
15 <ul>
16 <li class="tpChange"><a href="#">公告</a></li>
17 <li><a href="#">规则</a></li>
18 <li><a href="#">论坛</a></li>
19 <li><a href="#">安全</a></li>
20 <li><a href="#">公益</a></li>
21 </ul>
22 </div><!--top结束-->
23
24 <div class="content">
25 <ul style="dislpay:block">
26 <li>张勇：要玩快乐足球</li>
27 <li>阿里200万灾区</li>
28 <li>旅游宝让你边玩边赚钱</li>
29 <li>多行跟进阿里贷款</li>
30 </ul>
31 <ul style="display:none">
32 <li>[通知]滥发即将换新</li>
33 <li>淘宝执行大众评审</li>
34 <li>个人信息泄露严重</li>
35 <li>卖家防范红包诈骗提醒</li>
36 </ul>
37 <ul style="display:none">
38 <li>商品属性限制</li>
39 <li>又爱又恨代金券</li>
40 <li>购物后商家送红包</li>
41 <li>比特币严管啦</li>
42 </ul>
43 <ul style="display:none">
44 <li>金牌卖家再起航</li>
45 <li>橱窗规则在升级</li>
46 <li>走进无声课堂</li>
47 <li>注意骗子的新技术</li>
48 </ul>
49 <ul style="display:none">
50 <li>爱心品牌联合</li>
51 <li>金发商品属性</li>
52 <li>更换收货地址在的</li>
53 <li>各公益机构淘宝开店</li>
54 </ul>
55 </div><!--content结束-->
56
57 </div><!--wrap结束-->
58
59 </body>
60 </html>
*{margin:;
padding:;}
.wrap{
width:300px;
height:100px;
border:1px solid #8E8E8E;
margin:10px;
}
.top{
height:25px;
background-color:#CAC8C8;
}
.top a{
text-decoration:none;
}
.top a:hover{
color:red;
}
.top li{
list-style:none;
float:left;
width:59px;
height:25px;
text-align:center;
line-height:25px;
}
.content{
font-size:12px;
overflow:hidden;
height:70px;
width:300px;
line-height:25px;
}
.content li{
float:left;
list-style:none;
width:140px;
margin:6px 5px;
}
.top li.tpChange{
background-color:white;
font-weight:bold;
}
$(function(){
var top_li=$(".top ul li");
top_li.click(function(){
$(this).addClass("tpChange")
.siblings().removeClass("tpChange");
var index=top_li.index(this);
$(".content > ul").eq(index).show()
.siblings().hide();
})
});
遇到的问题：
1.引入js时，要先引入jQuery的js，再引入其他js，否则加载会出错。
2。注意css中tpChange类的写法
.top li.tpChange{
background-color:white;
font-weight:bold;
}
的写法，不能只写.tpChange。
tab选项卡的更多相关文章
- 基于CkEditor实现.net在线开发之路（4）快速布局，工具箱，模板载入，tab选项卡简单说明与使用
上一章给常用的from表单控件属性页面,进行了简单说明和介绍,但是由于是在网页中做界面设计,操作肯定没有桌面应用程序方便,便捷,为了更方便的布局与设计,今天我主要说一下快速布局,工具箱,tab选项卡, ...
- 可轮播滚动的Tab选项卡
前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...
- android tab选项卡的使用
项目做完了,写写博客,在项目中遇到的一些问题,或者是自己觉得很不错的东西.这一篇主要是想和大家分享一下我在项目中封装的一个东西,就是tab选项卡.先看看效果图: 我在网上看了很多有关选项卡的demo, ...
- js基础练习一之tab选项卡
最近在学习前端,当然包括js,css,html什么的,在听课时做的一些小练习,记录下来: 实例一: --Tab选项卡-- <script type="text/javascript&q ...
- :target伪类制作tab选项卡
:target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: <div> <a href="#demo1">点击此处</ ...
- 工作当中实际运用（1）——tab选项卡
不废话 直接上代码: tab选项卡 window.onload=function(){ var titles= document.getElementById('header-dh').getElem ...
- 各种效果的tab选项卡
;(function($){ $.fn.tabso=function( options ){ var opts=$.extend({},$.fn.tabso.defaults,options ); r ...
- (2)WinForm中改变Tab选项卡的顺序
Tab选项卡选中,在其属性中找到TabPages这个属性.点进去,可以通过上下移动标签卡改变标签卡的顺序.
- 原生js实现tab选项卡里内嵌图片滚动特效代码
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...
- tab选项卡-jQuery
上次用原生的js写了个tab选项卡 这次按照一样的思路用jQuery写了一个 ,直接看代码: /*布局*/ <div id="div1"> <input cl ...
随机推荐
- dynamips虚拟服务：找不到指定设备
刚开始接触dynamips,属于新手, 之前是可以正常使用dynamips的,但不知道什么原因就出现这样的问题 果断重新安装,之后可以正常使用
- 屏蔽同步(JAVA)
以全球气候预测程序为例.这些程序通过将地球分为许多单元,在每个循环中,每个单元的计算都是隔离进行的,直到这些值趋于稳定,然后相邻单元之间就会交换一些数据.所以,从本质上讲,在每个循环中各个线程都必须等 ...
- 2016"百度之星" - 复赛（Astar Round3） 1003 拍照
拍照 思路:先静态,离线树状数组,分别统计每个点向左向右能看到的船的数量.再枚举整个区间求最大值. 应为人和船都是动态的,假设船往左走,处理每个点看到向左最大船的数量,满足动态条件.就是向左的船一开始 ...
- 包含到cocos2d-x里的tcpsocket源码
声明:本文参考了langresser发布的blog“跨平台的游戏客户端Socket封装” Socket处理是异步非阻塞的,所以可以放心的放到主线程处理消息,并且在原作者的基本上进行了系列优化,考虑了客 ...
- [解决]ASP.NET MVC 4/5 源码调试(source code debug)
========================ASP.NET MVC 4============================ ASP.NET MVC 4 source code download ...
- Bzoj-2820 YY的GCD Mobius反演,分块
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2820 题意:多次询问,求1<=x<=N, 1<=y<=M且gcd( ...
- HDU-4612 Warm up 边双连通分量+缩点+最长链
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4612 简单图论题,先求图的边双连通分量,注意,此题有重边(admin还逗比的说没有重边),在用targ ...
- TCP恋爱史：三次握手和四次分手
TCP协议非常重要,这里把它的连接和释放整理一下. 首先是三次握手: 1. 客户端发起,像服务器发送的报文SYN=1,ACK=0,然后选择了一个初始序号:seq=x. SYN是干什么用的? 在链接的 ...
- 在virtualbox上安装mac os mavericks遇到Missing Bluetooth Controller Transport问题解决办法
挂载 HackBoot_Mav.iso 作为光驱,启动在 磁盘选择 界面,选择磁盘后按空格键,输入 启动参数 -v -x(-x的意思是安全模式,不这样的话,有蓝牙驱动作怪, 会输出 [IOBlueto ...
- Java快捷键
Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ctrl+Alt+↑ 复制当前行到上一行(复制增加)Alt+↓ 当 ...