js或者jq的tab切换
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>tab切换</title>
<meta name="keywords" content="" />
<meta name="Description" content="" />
<link rel="stylesheet" type="text/css" href="http://blog.163.com/fan_yishan/css/style.css"/>
<style type="text/css">
ul,li,div {padding:0;margin:0;}
ul li {float:left;width:100px;height:30px;line-height:30px;text-align:center;background-color:#fff;border:1px #bbb solid;border-bottom:none;}
ul li.fli {background-color:#ccc;color:red;}
ul {overflow:hidden;zoom:1;list-style-type:none;}
#tab_con {width:304px;height:200px;}
#tab_con div {width:304px;height:200px;display:none;border:1px #bbb solid;border-top:none;}
#tab_con div.fdiv {display:block;background-color:#ccc;}
</style>
</head>
<body>
<ul id="tab">
<li class="fli">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div id="tab_con">
<div class="fdiv">aaaa</div>
<div>bbbb</div>
<div>cccc</div>
</div>
<script type="text/javascript">
var tabs=document.getElementById("tab").getElementsByTagName("li");
var divs=document.getElementById("tab_con").getElementsByTagName("div");
for(var i=0;i<tabs.length;i++){
tabs[i].onclick=function(){
change(this);
}
}
function change(obj){
for(var i=0;i<tabs.length;i++){
if(tabs[i]==obj){
tabs[i].className="fli";
divs[i].className="fdiv";
}else{
tabs[i].className="";
divs[i].className="";
}
}
}
</script>
<!-- jq tab切换
<script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.js"></script>
<script type="text/javascript">
var tabs=$("#tab li");
tabs.click(function() {
$(this).addClass('fli').siblings().removeClass('fli');
$("#tab_con div").hide().eq(tabs.index(this)).show();
});
</script> -->
js或者jq的tab切换的更多相关文章
- js用户管理中心tab切换界面模板
效果体验:http://hovertree.com/texiao/js/27/ 效果图如下: 代码如下: <!DOCTYPE html> <html> <head> ...
- 使用swiper.js实现移动端tab切换
在项目中遇到的,要实现tab切换,我用的是swiper.js 官网:http://www.swiper.com.cn/api/start/new.html <!DOCTYPE html> ...
- js中常用的Tab切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jq写tab切换
$('.index-news-sub-box ul li').click(function(){ var i=$(this).index(); var img=$('.index-news-img-b ...
- 关于scrollintoview()真的是有意思极了，结合普通tab切换一起看看
scrollIntoView(alignWithTop) 是html5新特性中的一个元素,他主要是指滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素. alignWithTop是true ...
- 小程序的tab切换事件
index.wxml代码 <view class="tab-left" > <view " bindtap="tab">tab ...
- 教你两招用纯CSS写Tab切换
说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换. 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下: Tab切换 方法一:模 ...
- JS实现Tab切换
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jq 折面板+tab切换（自己封装的插件哦！！）
如上图所示的一个折面板效果+tab切换:最重要的js代码如下: 对于布局简单介绍下: hot_wrap_li 这个是带箭头的横条: Arrow 这个是箭头的div:hot_wrap_li_wrap 这 ...
随机推荐
- asp.net Socket的简单Web Server
1.首先初始化socket,包含对端点以及对连接队列长度的初始化 IPAddress address = IPAddress.Loopback; IPEndPoint endPoint = ); So ...
- jQuery选择器的的优点
jQuery选择器的的优点 选择器想必大家都不陌生,今天呢,我就给大家介绍一下jQuery选择器的优点: jQuery选择器更简洁的写法: jQuery完善的处理机制: jQuery选择器判断dom节 ...
- Scala基础 - 下划线使用指南
下划线这个符号几乎贯穿了任何一本Scala编程书籍,并且在不同的场景下具有不同的含义,绕晕了不少初学者.正因如此,下划线这个特殊符号无形中增加Scala的入门难度.本文希望帮助初学者踏平这个小山坡. ...
- 如何用C#完成控制台日历？
本题目的最终要就是根据用户输入的年和月在控制台输出单月的日历信息,附加范围年在1900-2100之间,月的范围在1-12之间,当用户输入不在范围时要给予错误信息提示:已知条件是1900年1月1日为星期 ...
- 微信第三方登录（原生）demo
在一家ecstore二开公司有一段时间了,公司希望往自己研发产品上面走,一直在培养新人. 最近要自己去微信登录,自己就在ectore的框架基础上,写的原生微信第三方登录以此来熟悉微信第三方登录,在 ...
- 深度解析PHP数组函数array_chunk
array_chunk是PHP中的一个数组分割函数,是将一个数组分割为多个数组块 我们可以把它理解卖豆腐的商人把一整块大豆腐切割为一个一个的小块来进行售卖 这个函数需要三个参数: 被切割的数组(必需) ...
- RedHat7上安装MySQL5.7.16
1.查看系统中是否已将安装MySQL,如果安装了,需要卸载. [root@chenguo etc]# rpm -qa|grep -i mysql 2.创建用户和组 [root@chenguo ~]# ...
- python 字典的常见操作
字典 字典的增删改查 字典的创建方式: # 创建字典类型 info = { 'name':'李白', ', 'sex':'男' } msg = { 'user01':'Longzeluola', 'u ...
- 设置Intellij IDEA 提示出未保存的*星号
IDEA实乃是java开发的神器,然而从eclipse或者MyEclipse转过来的开发每写完一行代码总是习惯的按下ctrl+s,然而IDEA代码编辑器的上方并没有提示未保存的*星号,提示星星,所以觉 ...
- Java集合之Properties
Java集合之Properties