web前端利用jq实现选项卡切换功能

最近在自学jQuery，利用jQuery现实了一下选项卡的切换

实现效果如下图：

功能：鼠标在各个标签中移动时，图片会显示相应的标题人物

html、css、jq代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>tab</title><style>*{margin: 0;padding: 0;}.box{width: 500px;height: 600px;border:1px solid #000000;margin: 50px auto;background-color: #216353;}img{margin-top: 100px;width: 500px;height: 320px;}.nav>li{list-style: none;width: 125px;height: 50px;background:#004445;text-align: center;line-height: 50px;float: left;color: #dcd6f7;font-size: 20px;font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;}.content>li{list-style: none;display: none;}.content>.show{display: block;}.nav>.current{background: #edffea;color: #004445;}</style><script src="lib/jquery-1.11.3/jquery-1.11.3/jquery.min.js"></script><script>$(function(){$(".nav>li").mouseenter(function(){$(this).addClass("current");$(this).siblings().removeClass("current");var index=$(this).index();console.log(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">路飞</li><li>索隆</li><li>罗宾</li><li>乔巴</li></ul><ul class="content"><li class="show"><img src="img/路飞.jpg" alt="路飞"></li><li><img src="img/索隆.jpg" alt="索隆"></li><li><img src="img/罗宾.jpg" alt="罗宾"></li><li><img src="img/乔巴.jpg" alt="乔巴"></li></ul></div></body>
</html>

web前端利用jq实现选项卡切换功能相关推荐

mui底部选项卡切换功能
mui底部选项卡实现切换功能  <!DOCTYPE html> <html> <head> <met ...
jquery选项卡切换功能实现
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
前端实现选项卡切换功能
目录选项卡_0.0 HTML _ 结构部分 : CSS _ 样式部分 : JS 代码实现 : 底码 : 优化 : 底码优化精简版: forEach 实现选项卡 : ES6 语法 : let 实现选项 ...
web前端之DOM操作——Tab切换栏的使用
Tab切换栏的详细解析下面给出京东某一页面的tab栏页面切换: 举例引入:鼠标悬停时,current元素的背景变色本段我们先举一个例子,因为这里用到了排他思想.对于理解tab切换,很有帮助. 完整 ...
Android开发之使用TabLayout快速实现选项卡切换功能(附源码下载)
看下效果图: 先看下布局: TabLayout的简单使用: 当选项卡过少时候设置填充全屏app:tabGravity="fill"设置下面切换选项卡的小滑片颜色app:tabInd ...
vue中tab切换前端实现_vue实现Tab切换功能
在项目开发中,我们经常会碰到Tab切换的功能,而在Vue中想实现这样的功能也应该有很多种,常用的三种应该是 Tab路由切换.Tab动态组件切换.通过v-show设置Tab显示隐藏.每种方法实现起来其实 ...
jquery实现选项卡切换功能+数据展示
完成王者荣耀资料站部分数据展示功能,要求通过选项卡,显示三个模块的数据: 英雄列表局内道具召唤师技能 html <body><div id="menu"> ...
web前端利用leaflet生成粒子风场，类似windy
wind.js如下: $(function() {var dixing = L.tileLayer.chinaProvider('Google.Satellite.Map', {maxZoom: 18 ...
视频教程-web前端经典教程之电商专题页开发-HTML5/CSS
web前端经典教程之电商专题页开发曾就职于富士康电商平台.尚德机构流量中心,授课风格明显的特点就是旁证博引,喜欢用大型互联网企业的相关的案例来讲某个知识点-- 蒋新合 ¥299.00 立即订阅扫码 ...

web前端利用jq实现选项卡切换功能

web前端利用jq实现选项卡切换功能相关推荐

最新文章

热门文章