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 这 ...
随机推荐
- winform无边框窗口拖动
无边框的窗口想拖动,只需要在置顶的容器上添加对应的mousedown 和 mousemove 事件就可以实现了.代码如下: //拖动窗口 private Point mPoint = new Poin ...
- 【JAVAWEB学习笔记】14_response
HttpServletResponse 学习目标 案例一.完成文件下载 案例二.生成验证码(了解) 1．HttpServletResponse概述 我们在创建Servlet时会覆盖service()方 ...
- 重构了cxlt-vue2-toastr插件
距离上篇文章已经过去一个多月了,期间有很多想法,但时间真不是想挤就能挤出来的.其实这段时间我就做了一件事,一个小程序的项目,已上线半月有余,也迭代了几个版本,现在还在不断完善. 先说点题外话,我们做了 ...
- jquery中html、text、val回调函数
先扫盲: 摘自菜鸟教程:jQuery 方法:text().html() 以及 val()拥有回调函数. 回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值.然后以函数新值返回您希望使 ...
- Seafile安装踩坑
欢迎大家访问我的博客新地址: 博客:http://monsterlin.com/ 原文地址:http://monsterlin.com/archives/HowToInstallSeafile.htm ...
- 关于MS12-020一次简单尝试
由于之前着重于web漏洞,主机漏洞这块比较薄弱.也没有用过metasploit,对于很多系统漏洞还不熟悉,正好这几天不忙,就想着慢慢学习,再写点简单的东西,进行总结记录. 这次尝试的是MS12-020 ...
- 生成JSON数据--官方方法
官方生成方法: 1)需要什么就给什么,要属性就给属性,要对象就给对象,要集合就给集合 2)添加都是使用put()方法 要求: 1.生成如下JSON数据: {"age":4,&quo ...
- 作为前端，我为什么选择 Angular 2？
转自:https://sanwen8.cn/p/2226GkX.html 没有选择是痛苦的,有太多的选择却更加痛苦.而后者正是目前前端领域的真实写照.新的框架层出不穷:它难吗?它写得快吗?可维护性怎样 ...
- MQL语句大全
mysql sql语句大全 1.说明:创建数据库 CREATE DATABASE database-name 2.说明:删除数据库 drop database dbname 3.说明:备份sql se ...
- 浅谈Android studio中OKHttp安装及简单使用
Google貌似在6.0版本里面删除了HttpClient相关API,鉴于okhttp的口碑相当好,介绍一下OKHttp的安装及使用: 一.安装 对于Android Studio的用户,在Projec ...