js中常用的Tab切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<style>
*{margin:0; padding:0; list-style:none;}
.box{
width: 1000px;
overflow: hidden;
margin:100px auto 0px;
}
#title{
line-height: 40px;
background-color: rgb(247,247,247);
font-size: 16px;
font-weight: bold;
color: rgb(102,102,102);
overflow: hidden;
}
#title span{
float: left;
width: 166px;
text-align: center;
}
#title span:hover{
/*color: black;*/
cursor: pointer;
}
#content{
margin-top: 20px;
}
#content li{
width: 1050px;
overflow: hidden;
display: none;
background-color: rgb(247,247,247);
}
#content li div{
width: 156px;
margin-right: 14px;
float: left;
text-align: center;
}
#content li div a{
font-size: 14px;
color: black;
line-height: 14px;
/* float: left;*/
display: inline-block;
margin-top: 10px;
}
#content li a:hover{
color: #B70606;
}
#content li div span{
font-size: 16px;
line-height: 16px;
/*float: left;*/
display: block;
color: rgb(102,102,102);
margin-top: 10px;
}
#content img{
float: left;
width: 155px;
height: 250px;
}
#title .select{
background-color: rgb(10,167,112);
color: white;
}
#content .show{
display: block;
}
</style>
</head>
<body>
<div class="box">
<p id="title">
<span class="select">帅哥</span>
<span>美女</span>
<span>宠物</span>
<span>影视</span>
<span>英雄联盟</span>
<span>音乐</span>
</p>
<ul id="content">
<li class="show">
<div><img src="data:images/shuaige1.jpg" alt="帅哥1"><a href="#">杰森·史坦森</a><span>狂拽炫酷屌炸天</span></div>
<div><img src="data:images/shuaige2.jpg" alt="帅哥2"><a href="#">杰森·史坦森</a><span>狂拽炫酷屌炸天</span></div>
<div><img src="data:images/shuaige3.jpg" alt="帅哥3"><a href="#">汤姆·克鲁斯</a><span>高端大气上档次</span></div>
<div><img src="data:images/shuaige4.jpg" alt="帅哥4"><a href="#">汤姆·克鲁斯</a><span>高端大气上档次</span></div>
<div><img src="data:images/shuaige5.jpg" alt="帅哥5"><a href="#">卷福</a><span>低调奢华有内涵</span></div>
<div><img src="data:images/shuaige6.jpg" alt="帅哥6"><a href="#">卷福</a><span>低调奢华有内涵</span></div>
</li>
<li>
<div><img src="data:images/meinv1.jpg" alt="美女1"><a href="#">美女</a><span>外猛内柔女汉子</span></div>
<div><img src="data:images/meinv2.jpg" alt="美女2"><a href="#">美女</a><span>外猛内柔女汉子</span></div>
<div><img src="data:images/meinv3.jpg" alt="美女3"><a href="#">美女</a><span>卖萌嘟嘴剪刀手</span></div>
<div><img src="data:images/meinv4.jpg" alt="美女4"><a href="#">美女</a><span>卖萌嘟嘴剪刀手</span></div>
<div><img src="data:images/meinv5.jpg" alt="美女5"><a href="#">美女</a><span>时尚亮丽小清新</span></div>
<div><img src="data:images/meinv6.jpg" alt="美女6"><a href="#">美女</a><span>时尚亮丽小清新</span></div>
</li>
<li>
<div><img src="data:images/chongwu1.jpg" alt="宠物1"><a href="#">宠物</a><span>每只666块</span></div>
<div><img src="data:images/chongwu2.jpeg" alt="宠物2"><a href="#">宠物</a><span>每只666块</span></div>
<div><img src="data:images/chongwu3.jpg" alt="宠物3"><a href="#">宠物</a><span>每只666块</span></div>
<div><img src="data:images/chongwu4.jpg" alt="宠物4"><a href="#">宠物</a><span>每只666块</span></div>
<div><img src="data:images/chongwu5.jpg" alt="宠物5"><a href="#">宠物</a><span>每只666块</span></div>
<div><img src="data:images/chongwu6.jpg" alt="宠物6"><a href="#">宠物</a><span>每只666块</span></div>
</li>
<li>
<div><img src="data:images/yingshi1.jpg" alt="影视1"><a href="#">哈利波特系列</a><span>经典中的经典</span></div>
<div><img src="data:images/yingshi2.jpg" alt="影视2"><a href="#">三傻大闹宝莱坞</a><span>看到泪崩</span></div>
<div><img src="data:images/yingshi3.jpg" alt="影视3"><a href="#">变形金刚系列</a><span>过瘾过瘾过瘾</span></div>
<div><img src="data:images/yingshi4.jpg" alt="影视4"><a href="#">千与千寻</a><span>梦中的小萝莉那么清新</span></div>
<div><img src="data:images/yingshi5.jpeg" alt="影视5"><a href="#">龙猫</a><span>我的龙猫啊啊啊</span></div>
<div><img src="data:images/yingshi6.jpg" alt="影视6"><a href="#">阿甘正传</a><span>阿甘还是那个阿甘</span></div>
</li>
<li>
<div><img src="data:images/lol1.jpg" alt="lol1"><a href="#">寒冰射手</a><span>蛮王他媳妇</span></div>
<div><img src="data:images/lol2.jpg" alt="lol2"><a href="#">黑暗之女</a><span>小萝莉一枚</span></div>
<div><img src="data:images/lol3.jpg" alt="lol3"><a href="#">探险家</a><span>游戏中我最帅</span></div>
<div><img src="data:images/lol4.jpg" alt="lol4"><a href="#">人马</a><span>上单大野全能</span></div>
<div><img src="data:images/lol5.jpg" alt="lol5"><a href="#">提莫提百万</a><span>每天死亡百万次。。</span></div>
<div><img src="data:images/lol6.jpg" alt="lol6"><a href="#">狼人</a><span>别给我放大</span></div>
</li>
<li>
待开发。。。
</li>
</ul>
</div>
<script>
var title=document.getElementById('title');
var content=document.getElementById('content');
var spans=title.getElementsByTagName('span');
var lis=content.getElementsByTagName('li');
for (var i = 0; i < spans.length; i++) {
spans[i].index=i;
spans[i].onclick=function(){
for (var j = 0; j < spans.length; j++) {
spans[j].className='';
lis[j].className='';
}
this.className='select';
lis[this.index].className='show';
}
}
</script>
</body>
</html>
这段代码的关键处在最后的两个for遍历和this指针，第一个for遍历是为每一个span按钮添加点击事件，而第二个for遍历是确定当前点击的是哪个按钮，相应的内容部分就很好控制出现和隐藏了；
js中常用的Tab切换的更多相关文章
- js用户管理中心tab切换界面模板
效果体验:http://hovertree.com/texiao/js/27/ 效果图如下: 代码如下: <!DOCTYPE html> <html> <head> ...
- js中常用的操作
1.js中常用的数组操作 2.js中常用的字符串操作 3.js中常用的时间日期操作 4.定时器
- 基础篇：1.JavaScript运行在html中，引用有几种方式？—— 6.js中常用的输出方式？
书接上文,上文提到若干条JavaScript的基础性知识,大部分都是一些概念性的东西,本着认真严谨的态度,我们要认真对待,有些条目的问题是某个知识点的周边延伸,为节约篇幅,就一起整理了,如有描述不对的 ...
- Js中常用的字符串，数组，函数扩展
由于最近辞职在家,自己的时间相对多一点.所以就根据prototytpeJS的API,结合自己正在看的司徒大神的<javascript框架设计>,整理了下Js中常用一些字符串,数组,函数扩展 ...
- 【温故知新】——原生js中常用的四种循环方式
一.引言 本文主要是利用一个例子,讲一下原生js中常用的四种循环方式的使用与区别: 实现效果: 在网页中弹出框输入0 网页输出“欢迎下次光临” 在网页中弹出框输入1 网页输出“查询中……” 在 ...
- JS中常用开发知识点
JS中常用开发知识点 1.获取指定范围内的随机数 2.随机获取数组中的元素 3.生成从0到指定值的数字数组 等同于: 4.打乱数字数组的顺序 5.对象转换为数组 //注意对象必须是以下格式的才可以通 ...
- js中常用的对象—String的属性和方法
今天说一下,js中常用的内置对象——String对象它有以下几个常用的属性:lengthprototype 有以下几个常用的方法:parseInt()转换为数字parseFloat()转换为数字,支持 ...
- js中常用的对象—Array的属性和方法
今天说一下,js中常用的内置对象——Array对象 Array常用属性: length prototype :给系统对象添加属性和方法 Array常用方法: Array.prototype.sum = ...
- 今天给大家分享一下js中常用的基础算法
今天给大家分享一下js中常用的基础算法,废话不多说,直接上代码: 1.两个数字调换顺序 ,b= function fun(a,b){ b = b - a ;// a = 2 ; b = 2 a = a ...
随机推荐
- codeforces733-C. Epidemic in Monstropolis 贪心加链表
题意 现在有一个怪兽序列a[i],权值大的怪兽可以吃权值小的怪兽,吃完之后权值大的怪兽的权值会变成两者权值的和,相邻的怪兽才能吃 吃完之后,位置合并,队列前移,从左到右重新编号,重复这一过程, 然后给 ...
- 关于Vector中的元素中含有指针成员的情况
对于容器,当容器的各个元素为类类型,且该类类型中含有指针成员时: 如果类类型的析构函数中包含了对指针变量指向内存的释放操作,则在利用clear()函数删除容器所有元素时,会自动调用类的析构函数,自动实 ...
- 30分钟LINQ教程（转）
在说LINQ之前必须先说说几个重要的C#语言特性 一:与LINQ有关的语言特性 1.隐式类型 (1)源起 在隐式类型出现之前, 我们在声明一个变量的时候, 总是要为一个变量指定他的类型 甚至在fore ...
- Spring的Lifecycle
Lifecycle接口定义了每个对象的重要方法,每个对象都有自己的生命周期需求,如下: public interface Lifecycle { void start(); void stop(); ...
- PDA手持移动POS销售开单软件（网络版）、PDA手持设备小票机
背景描述: 一家大中型批发及门店销售企业,经销多种冻食品,业务范围覆盖周边众多区域和城市.成立以来,随着业务量的扩大,产品销售分两大渠道:多门店销售和仓库批发,各门店每天都有大量的零散客户和老客户进行 ...
- yii2.0 的数据的 查 删
数据的查询 /** * 查询正在使用的数据 model 层 */ public function selectdata(){ return $this->find()->a ...
- 转：delphi异常捕获try except语句 和 try finally语句用法
转:http://www.java123.net/v/936977.html 2015-06-24 09:27:48 一直写程序都没管他们,也尽量很少用,今天终于想把他给弄个明白,在网上找来 ...
- iOS UITextField的returnkey点击事件
关于隐藏软键盘,网上的办法良莠不齐,大多是通过实现UITextFieldDelegate来隐藏软键盘,该方法代码较多,且在文本框很多的时不好处理.我经过搜索与摸索,找到了最佳的处理办法.(引用的) ...
- Android自动化测试 - MonkeyRunner(三) 随手练习测试脚本
#coding=utf-8 import os import time #import MonkeyRunner three module from com.android.monkeyrunner ...
- Fetch from Upstream 变灰失效
Team——>Remote——>Configure Fetch from Upstream… Team——>Remote——>Configure Push to Upstre ...