jQuery实现选项卡切换图片
本文实例为大家分享了jQuery实现选项卡切换图片的具体代码，供大家参考，具体内容如下
效果：
弄出来这个效果，你需要找4张大小相同的图片，大小不一样弄出来效果会很难看
代码：
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>使用jQuery实现选项卡切换图片</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 533px;
height: 350px;
border: 1px solid plum;
margin: 50px auto;
}
.nav>li{
list-style: none;
width: 133.25px; /*总宽度除以4得到的*/
height: 50px;
background: #8000ff;
text-align: center;
line-height: 50px;
float: left;
}
.nav>.current{
background: #69ff8f;
}
.content>li{
list-style: none;
display: none;
}
.content>.show{
display: block;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
// 监听选项卡的移入事件
$(".nav>li").mouseenter(function () {
// 修改被移入选项卡的背景颜色
$(this).addClass("current");
// 还原其它兄弟选项卡的背景颜色
$(this).siblings().removeClass("current");
// 获取当前移出选项卡的索引
var index = $(this).index();
// 根据索引找到对应的图片
var $li = $(".content>li").eq(index);
// 隐藏非当前的其它图片
$li.siblings().removeClass("show");
// 显示对应的图片
$li.addClass("show");
});
});
</script>
</head>
<body>
<div class="box">
<ul class="nav">
<li class="current">图片1</li>
<li>图片2</li>
<li>图片3</li>
<li>图片4</li>
</ul>
<ul class="content">
<li class="show"><img src="img/111.jpg" alt=""></li>
<li><img src="img/222.jpg" alt=""></li>
<li><img src="img/333.jpg" alt=""></li>
<li><img src="img/444.jpg" alt=""></li>
</ul>
</div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jQuery实现Tab选项卡切换效果简单演示
本文实例针对jQuery实现Tab选项卡切换效果进行了简单演示,完全是自己的思考实现过程,分享给大家供大家参考.具体如下: 起初我Html代码架子是这样的: <div class="tabs"> <ul> <li class="acss" data-box="#panel-1">标签1</li> <li class="bcss" data-box="#panel-
-
jquery实现选项卡切换代码实例
选项卡在网页中很常见,可以说是必备的一个元素了,网上其实也有很多案例讲解选项卡的做法,各种炫酷. 写这篇文章,就是记录下自己的一个练手Demo了. 两张简陋的图. 主要逻辑就在于找到选项卡和内容框相对应的下标. <html> <head> <meta charset="UTF-8"> <title>选项卡</title> <script type="text/javascript" src="
-
jquery编写Tab选项卡滚动导航切换特效
本文实例为大家分享jquery编写Tab选项卡切换特效,供大家参考,具体内容如下 效果说明:点击tab导航,页面滑动到下方相应板块.并且当页面通过鼠标滚动下去时,上方的tab也可以自动切换到当前位置的板块上. 代码说明:js中对两个动作分别写,一个是tab点击下滑到相应板块位置:一个是鼠标滚动下去的时候tab判定当前页面滚动高度切换tab. js: $(document).ready(function(){ $('.switch-tab>li').click(function(){ var s=
-
基于jquery实现最简单的选项卡切换效果
这个功能在现在的网站中使用较为普遍,就是以选项卡的形式来对一些内容做了分类.,比如下面的天猫商城. 下面的源码是仿照天猫写的一个选项卡,实现起来的效果如下. 主要是利用我们在点击相应板块是触发它的单击事件,在单击事件中再对内容显示框(tabbox)进行相应项的显示和隐藏操作. 同时利用hover为其添加了鼠标滑过时的效果. 代码: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xh
-
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
本文实例讲述了jQuery实现的Tab滑动选项卡及图片切换效果.分享给大家供大家参考.具体如下: 这里汇总了几个Tab,滑动门,选项卡,图片切换,在一个网页中实现了超多的常用效果,大家喜欢的滑动门,焦点图切换,标签选项卡以及文字轮番等都集中在了一起,无聊的功劳,忙的时候还顾不上写,另外还加入了圆角,都是参考以前学习的知识写的.期间使用了jquery-1.6.2.min.js框架库. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-n
-
jQuery实现选项卡切换效果简单演示
本文实例讲述了jQuery实现选项卡切换效果简单演示代码.分享给大家供大家参考.具体如下: 运行效果图如下 一.主体程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>选项卡</title> <link type="text/css" rel="stylesheet" href="c
-
jQuery实现滚动切换的tab选项卡效果代码
本文实例讲述了jQuery实现滚动切换的tab选项卡效果代码.分享给大家供大家参考.具体如下: 这里介绍的jquery tab选项卡滚动动态切换代码,似乎很个性的网页选项卡,没有边框的修饰,但十分简约大方,选项卡菜单目前在各大网站很流行,做为前端设计者,能够得心应手的写出一个选项卡是很有必要的哦,希望本代码能为您带去一份参考资料. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-scroll-cha-tab-nav-style-
-
jQuery简单实现tab选项卡切换效果
抽空把公司项目上用的tab效果封装了一下,实在是需要用的地方太多了~~~ 效果图: 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://apps
-
jQuery实现TAB选项卡切换特效简单演示
本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery tab切换</title> <style type="text/css"> *{ margin:0; pad
-
jquery自动切换tabs选项卡的具体实现
本节内容:jquery实现自动切换选项卡. 代码: 复制代码 代码如下: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><%String path = request.getContextPath(); %><!DOCTYPE html PUBLIC "-//W3C//DTD HTM