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 这 ...
随机推荐
- 分布式缓存技术redis学习—— 深入理解Spring Redis的使用
关于spring redis框架的使用,网上的例子很多很多.但是在自己最近一段时间的使用中,发现这些教程都是入门教程,包括很多的使用方法,与spring redis丰富的api大相径庭,真是浪费了这么 ...
- MyBatis源码解读（1）——SqlSessionFactory
在前面对MyBatis稍微有点了解过后,现在来对MyBatis的源码试着解读一下,并不是解析,暂时定为解读.所有对MyBatis解读均是基于MyBatis-3.4.1,官网中文文档:http://ww ...
- 写给Android App开发人员看的Android底层知识（1）
这个系列的文章一共8篇,我酝酿了很多年,参考了很多资源,查看了很多源码,直到今天把它写出来,也是战战兢兢,生怕什么地方写错了,贻笑大方. (一)引言 早在我还是Android菜鸟的时候,有很多技术我都 ...
- 无锁atomicInteger
AtomicInteger可以保证硬件上的原子操作 1.主要原理 CAS操作 在进行数据更新的时候,会进行与内存中的地址进行比较,若预期值与内存中的值相同,则进行数据上的更新,若值不同,则更新失败, ...
- mysql变量使用总结(转)
set语句的学习: 使用select定义用户变量的实践将如下语句改成select的形式: set @VAR=(select sum(amount) from penalties);我的修改: sele ...
- java虚拟机学习-JVM调优总结-调优方法(12)
JVM调优工具 Jconsole,jProfile,VisualVM Jconsole : jdk自带,功能简单,但是可以在系统有一定负荷的情况下使用.对垃圾回收算法有很详细的跟踪.详细说明参考这里 ...
- v$session & v$session_wait
(1)v$session v$session视图记录了当前连接到数据库的session信息 Column Description SADDR session address SID Session i ...
- Spring+SpringMVC+MyBatis深入学习及搭建(五)——动态sql
转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6908763.html 前面有讲到Spring+SpringMVC+MyBatis深入学习及搭建(四)——My ...
- HTML5资源教程
新款CSS3按钮组合 5组可爱CSS3按钮 Leave a reply 之前我分享过一些时尚的CSS3动画按钮,比如CSS3渲染Checkbox实现3D开关切换按钮.纯CSS3 3D按钮 按钮酷似牛奶 ...
- 【小练习05】HTML+CSS--淘宝商铺小页面
要求实现如下效果图: 代码演示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...