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). ...
随机推荐
- Linux——用户及文件权限管理
2019-07-31 用户管理 查看用户 who am i:打开当前伪终端的用户的用户名 pts/0 后面那个数字就表示打开的伪终端序号,你可以尝试再打开一个终端,然后在里面输入 who am i , ...
- Shell: 文本文件操作
文件显示和信息 wc wc 可以用于统计文件的行数和单词数. nl nl 在文件的每行内容前面加上行号. 基于行的操作 grep grep 用于筛选匹配特定字符的行. grep "Hello ...
- C3P0连接池属性配置注释
属性 解释 acquireIncrement 当连接池中的连接耗尽的时候c3p0一次同时获取的连接数 默认为:3 acquireRetryAttempts 定义在从数据库获取新连接失败后重复尝试的次数 ...
- Java工程师面试linux操作选择面试题大全
1.请写出常用的linux指令不低于10个,请写出linux tomcat启动.linux指令arch 显示机器的处理器架构(1)uname -m 显示机器的处理器架构(2)shutdown -h n ...
- java多线程并发面试题
1.多线程有什么用? (1)发挥多核CPU的优势 随着工业的进步,现在的笔记本.台式机乃至商用的应用服务器至少也都是双核的,4核.8核甚至16核的也都不少见,如果是单线程的程序,那么在双核CPU上就浪 ...
- 运行连接Oracle数据库时，Idea报错: Error : java 不支持发行版本5
按照上面的截图步骤,一步步往下走,再运行程序时就不会报错了. 原文链接:https://blog.csdn.net/qq_22076345/article/details/82392236 感谢原文作 ...
- Expedition
Expedition 给出n+1个整点\(\{x_i\}\)(保证递增排序),一个司机带着初始油量p,从\(x_{n+1}\)出发,每行驶一个单位长度消耗一个油量,其中\(x_1\sim x_n\)为 ...
- 【leetcode】951. Flip Equivalent Binary Trees
题目如下: For a binary tree T, we can define a flip operation as follows: choose any node, and swap the ...
- 【JZOJ6431】【luoguP5658】【CSP-S2019】括号树
description analysis 用栈维护一下树上路径未匹配的左括号,然后在树上找右括号匹配,设\(f[i]\)为\(i\)节点的贡献,\(g[i]\)是答案 为左括号可以直接继承父节点的信息 ...
- shell编程基础干货
变量及赋值 设置变量 A=‘china’ 取消变量 unset A 加上 export 关键字 代表全局变量 a=$(ls -l /root/bin) ##运行里面的命令,并把结 ...