jq-demo-tab切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
border: none;
}
ul, li {
list-style: none;
} #box {
width: 500px;
height: 400px;
margin: 20px auto;
} #list1 {
height: 26px;
} #list1 li {
width: 30px;
height: 26px;
line-height: 26px;
float: left;
background: #ddd;
padding: 0 10px;
cursor: pointer;
} #list1 li.hover{
background: #ABCDEF;
color: white;
}
#list2 {
width: 480px;
height: 320px;
background: #abcdef;
padding: 10px;
} #list2 li, #list2 img {
width:480px;
height: 320px;
}
</style>
</head>
<body>
<div id="box">
<ul id="list1">
<li class= "hover">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<ul id="list2">
<li><img src="data:images/11.jpg"/></li>
<li><img src="data:images/22.jpg"/></li>
<li><img src="data:images/33.jpg"/></li>
</ul> </div> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
//第一张图片 显示，其他隐藏
$("#list2").find("li").first().show().siblings().hide(); //移入
$("#list1 li").mouseenter(function () {
$(this).addClass("hover").siblings().removeClass("hover");
var index = $(this).index();
$("#list2 li").eq(index).show().siblings().hide();
});
})
</script>
</body>
</html>
jq-demo-tab切换的更多相关文章
- js或者jq的tab切换
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- 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 ...
- jq 折面板+tab切换（自己封装的插件哦！！）
如上图所示的一个折面板效果+tab切换:最重要的js代码如下: 对于布局简单介绍下: hot_wrap_li 这个是带箭头的横条: Arrow 这个是箭头的div:hot_wrap_li_wrap 这 ...
- 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 基于zepto的H5/移动端tab切换触摸拖动加载更多数据
以前实现移动端的滑动加载更多实现的方法是当滚动条快到页面底部时就自动加载更多的数据,在这方面很多人都用的是"西门的后花园"写的一个叫dropload的插件,这个插件用起来也很好,很 ...
- jquery实现tab切换完整代码
代码如下,保存到html文件打开: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- tab切换-2016.6.4
以前的tab切换,一般都是自己找网上的源代码,不知道含义,直接套,然后会有一些不知道的问题出现. 最近学习了jq(当然属于懒人的我,学习进度很慢),然后再工作中遇到了tab选项卡,所以决定自己写一个. ...
- 【原】react做tab切换的几种方式
最近搞一个pc端的活动,搞了一个多月,甚烦,因为相比于pc端,更喜欢移动端多一点.因为移动端又能搞我的react了. 今天主要总结一下react当中tab切换的几种方式,因为tab切换基本上都会用到. ...
- Android Studio精彩案例(二)《仿微信动态点击底部tab切换Fragment》
转载本专栏文章,请注明出处,尊重原创 .文章博客地址:道龙的博客 现在很多的App要么顶部带有tab,要么就底部带有tab.用户通过点击tab从而切换不同的页面(大部分情况时去切换fragment). ...
随机推荐
- mysql的一些语法
alter table S61.T6198 modify F12 varchar(30) DEFAULT NULL COMMENT '流水号'; 修改表字段结构. mysql不支持top ,只支持l ...
- JAVA学习，边学习边总结边记录
纯属个人想法,个人感觉,有什么不足之处,还望看到的人指正. 我将一步一步的往下记录下去,后面会加一个基本完整的程序,敬请期待. 一.java基础 二.java面向对象 三.html,jsp 四.Jav ...
- Linux环境安装Nginx步骤
centos7平台编译环境使用如下指令安装: 1. 安装make: yum -y install gcc automake autoconf libtool make 2. 安装g++: yum -y ...
- Android jniLibs下目录详解（.so文件）
http://www.jianshu.com/p/b758e36ae9b5 最近又研究了一下,参考了一下:三星/联发科等处理器规格表 更新时间:2017年5月手机CPU架构体系分类及各大厂商 PS:我 ...
- taro-安装及使用-npm
taro-安装及使用 https://nervjs.github.io/taro/docs/GETTING-STARTED.html 安装 Taro 项目基于 node,请确保已具备较新的 node ...
- Dart编程实例 - 类型测试操作符 is!
Dart编程实例 - 类型测试操作符 is! void main() { double n = 2.20; var num = n is! int; print(num); } 本文转自:http:/ ...
- XCode升级之后（7-->8），控制打印问题（打印一些烂七八糟的东西）解决办法
1. 2. 3. 搞定!
- PHP ftp_pwd() 函数
定义和用法 ftp_pwd() 函数返回指定 FTP 连接的当前目录名称. 语法 ftp_pwd(ftp_connection) 参数 描述 ftp_connection 必需.规定要使用的 FTP ...
- Shiro学习（2）身份验证
身份验证,即在应用中谁能证明他就是他本人.一般提供如他们的身份ID一些标识信息来表明他就是他本人,如提供身份证,用户名/密码来证明. 在shiro中,用户需要提供principals (身份)和cre ...
- vue基础四
1.绑定Html Class(在 v-bind 用于 class 和 style 时, Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组) 1.1对象语法 传给v-bin ...