js 实现tab栏切换效果
效果图：
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
#tab{
width:1000px; height: 475px; margin: 100px auto;;
}
ul{
list-style: none;
width: 320px;
height: 36px;
border: 1px solid #ddd;
padding-left: 15px;
}
#tab li{
float: left;
width: 80px;
height: 34px;
line-height: 34px;
cursor: pointer;
border-top: 4px solid #fff;
text-align: center;
position: relative;
}
#tab li.active{
border-top-color: red;
}
span{
position: absolute;
right: -2px;
}
#option{
border: 1px solid #ddd;
margin-top: -1px;
}
</style>
</head>
<body>
<div id="tab">
<ul>
<li class="active">国际大牌<span>|</span></li>
<li>国装名牌<span>|</span></li>
<li>清洁用品<span>|</span></li>
<li>男士精品</li>
</ul>
<div id="option">
<img src="t1.jpg" alt="" id="picture"/>
</div>
</div>
<script type="text/javascript">
var lis = document.getElementById("tab").getElementsByTagName("li");
var pic = document.getElementById("picture");
for(var i=0;i<lis.length;i++){
lis[i].index = i;//获取索引位置
lis[i].onmouseover = function () { for(var j =0;j<lis.length;j++ ){
lis[j].className = "";
}
this.className="active";
pic.setAttribute("src","t"+(this.index+1)+".jpg");
}
} </script>
</body>
</html>
js 实现tab栏切换效果的更多相关文章
- ES6面向对象实现tab栏切换效果
面向对象实现tab栏切换效果
- JS实现 Tab栏切换案例
要求:当鼠标点击上面相应的选项卡(tab),下面页面的内容也随之而改变. 结构分析: 全部的内容都放到一个大的盒子里面,盒子里面又可以分为上面和下面两个盒子. 上面的盒子放了 5个li,装着5个小的选 ...
- tab栏切换效果案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS案例--Tab栏切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- tab栏切换效果运用案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- tab栏切换效果
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- JavaScript--tab栏切换效果
tab栏切换效果: <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
- 纯js实现网页tab选项卡切换效果
纯js实现网页tab选项卡切换效果 百度搜索 js 点击菜单项就可以切换内容的效果
- jQuery带有定时器的tab栏切换
现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务 ...
随机推荐
- jQuery autocomplete -默认
<!doctype html> <html> <head> <meta name="content-type" content=" ...
- 16-多线程爬取糗事百科（python+Tread）
https://www.cnblogs.com/alamZ/p/7414020.html 课件内容 #_*_ coding: utf-8 _*_ ''' Created on 2018年7月17日 ...
- VS2017在Release下编译错误C1001
在使用VS2017编译C程序时,Debug模式下编译链接执行都没有问题,但是一转到Release模式下就出现下列编译链接错误(IDE:VS2017 /VC++/MFC程序,目标平台x86+Win32位 ...
- 白盒测试实践--Day3 12/19/2017
累计完成任务情况: 阶段内容 参与人 完成静态代码检查结果报告 小靳 完成JUnit脚本编写 小黄 完成CheckStyle检查 小靳 完成代码评审会议纪要和结果报告 小熊.小梁及其他 完成白盒测试用 ...
- modifiers标量调节器插件的定义和使用
在插件目录plugins里新建文件 modifier.插件名.php文件(如 modifier.插件名.php)例:function smarty_modifier_test($utime, $for ...
- [GO]接口的转换
package main import "fmt" type Humaner interface { //子集 SayHi() } type Personer interface ...
- WordPaster-Joomla_3.4.7-tinymce 4.1.7示例发布
资源下载:Joomla 3x, 1.1.1. 1.添加wordpaster文件夹 /media/ 1.1.2. 2.添加插件文件夹 路径:media/editors/tinymce/plugi ...
- 六）iframe 及父子页面之间获取元素、方法调用
http://www.w3school.com.cn/tags/tag_iframe.asp father.html <!DOCTYPE html> <html> <he ...
- （转）构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（5）-EF增删改查by糟糕的代码
原文地址:http://www.cnblogs.com/ymnets/archive/2013/11/16/3426454.html 上一讲我们创建了一系列的解决方案,我们通过一个例子来看看层与层之间 ...
- 搭建python+PyQt+Eric平台
搭建python+PyQt+Eric平台 预备安装程序: 2.1.下载Python3.2 官方网站:http://www.python.org/ 下载地址:http://www.python.org/ ...