jq实现一个简易的选项卡

以下写的方法不是最优质的的方法，就是为了练练手，希望大家不要介意，如有问题，还请多指教

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>li {list-style-type: none;}a {text-decoration-line: none;}.parent {position: relative;width: 359px;float: left;background-color: #cfa;position: absolute;left: 50%;transform: translate(-50%);}.lunre li {float: left;width: 52px;font-size: 14px;text-align: center;line-height: 45px;height: 45px;}.lunre a {font-size: 16px;}.lunre .re {border-bottom: 3px solid #DDB75F;}.lunre li.re a {color: #DDB75F;}.biao a {display: block;text-align: center;color: #DDB75F;font-size: 20px;height: 20px;margin-bottom: 10px;}.did {position: absolute;top: 23px;right: 46px;}.bottom {position: relative;height: 275px;width: 320px;overflow: hidden;}.bottom .tab {height: 275px;width: 320px;position: absolute;top: 10px;}.nongqing {text-align: center;overflow: hidden;}.nongqing li {padding: 5px 0px 5px 0px;width: 210px;white-space: nowrap;color: #fff;}.nongqing li a {padding-right: 44px;font-size: 18px;color: #b8b9c5 !important;}.nongqing li span {font-size: 12px;color: black;}</style>
</head><body><div class="parent"><div class="lunre"><ul><li class="re acti"><a href="">热门</a></li><li><a href="">新闻</a></li><li><a href="">公告</a></li><li><a href="">活动</a></li><li><a href="">赛事</a></li></ul><a class="did" href="">...</a></div><div class="bottom"><div class="tab"><p class="biao"><a href="">9月3日全服不停机更新公告</a></p><ul class="nongqing"><li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li><li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li><li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li><li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li><li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li><li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li><li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li></ul></div><div class="tab"><p class="biao"><a href="">9月4日全服不停机更新公告</a></p><ul class="nongqing"><li><a href="">浓情轮播，秋日活动来袭</a><span>09/02</span></li><li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li><li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li><li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li><li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li><li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li><li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li></ul></div><div class="tab"><p class="biao"><a href="">9月5日全服不停机更新公告</a></p><ul class="nongqing"><li><a href="">浓情十月，秋日活动来袭</a><span>09/02</span></li><li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li><li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li><li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li><li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li><li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li><li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li></ul></div><div class="tab"><p class="biao"><a href="">9月6日全服不停机更新公告</a></p><ul class="nongqing"><li><a href="">爱情九月，秋日活动来袭</a><span>09/02</span></li><li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li><li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li><li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li><li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li><li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li><li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li></ul></div><div class="tab"><p class="biao"><a href="">9月7日全服不停机更新公告</a></p><ul class="nongqing"><li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li><li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li><li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li><li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li><li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li><li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li><li><a href="">浓情九月，秋日活动来袭</a><span>09/02</span></li></ul></div></div></div><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><script>$('.lunre li').hover(function () {$(this).addClass('re').siblings().removeClass('re');})$(function () {//初始的时候 当前处于活动状态的元素索引var current = $('.lunre li').index();$('.tab').each(function (x, y) {//x代表索引值 y代表操作的Dom对象//初始化时 是将所有的tab块 都移动各自的距离  呈一行排开$(y).css('left', x * 320 + 'px');});$('.lunre li').mouseover(function () {//触发事件后， 当前处于活动状态的元素var i = $(this).index();if (i != current) {//将当前处于活动状态的元素变更一下current = i;//可以通过他们的定位值进行改变$('.tab').each(function (x, y) {//此时的x是最终移动到哪个li上，从而判断所有的dom对象都移动相同距离//stop(true，true)表示清空当前动画队列，立即停止并完成当前动画。//第一个参数 是否清空当前动画队列//第二个参数是是否完成当前动画//y 代表的是所有的dom对象，每一个都执行了leftvar left = x * 320 - current * 320;$(y).stop(true, true).animate({left: left + 'px'}, 500);})}})});</script>
</body></html>

jq实现一个简易的选项卡相关推荐

用jq撸一个简易轮播图
本次文章我将来用jq实现一个轮播图,废话少说下面放效果先说下基本思想,先将item使用position: absolute;脱离文档流令他们叠在一起,使用z-index来实现轮播的效果,注:这里如果 ...
初学nodejs——实现一个简易论坛（完成简单的登录、注册、发帖、评论功能）
前言前段时间临近期末,在学校上完最后的课程后得知有一些作业贴近于前端,其中包括javaWeb的一个大作业--完成一个简易论坛实现登录.注册.发帖.评论等功能. (PS:本来老师要求用java写后台, ...
Android实现一个简易的新闻列表APP（TabLayout+ViewPager+Fragment）
Android实现一个简易的新闻列表APP(TabLayout+ViewPager+Fragment) 文章目录 Android实现一个简易的新闻列表APP(TabLayout+ViewPager+F ...
在windows程序中嵌入Lua脚本引擎--建立一个简易的“云命令”执行的系统
在<在windows程序中嵌入Lua脚本引擎--使用VS IDE编译Luajit脚本引擎>开始处,我提到某公司被指责使用"云命令"暗杀一些软件.本文将讲述如何去模拟一个 ...
用java实现一个简易自动提款机
用java实现一个简易自动提款机,且有以下要求如何实现呢?首先,我们定义一个用户类User,同时根据要求设计好属性(本人部分命名没有使用驼峰命名法,不够规范).因为一个人可能有多个卡,卡号又不能重复 ...
python写一个文件下载器_Python3使用TCP编写一个简易的文件下载器
原标题:Python3使用TCP编写一个简易的文件下载器利用Python3来实现TCP协议,和UDP类似.UDP应用于及时通信,而TCP协议用来传送文件.命令等操作,因为这些数据不允许丢失,否则会造 ...
连夜撸了一个简易聊天室
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 分不清轮询.长轮询?不知道什么时候该用websocket还 ...
python 正则的使用 —— 编写一个简易的计算器
python 正则的使用 -- 编写一个简易的计算器在 Alex 的博客上看到的对正则这一章节作业是编写一个计算器,要求能计算出下面的算式. 1 - 2 * ( (60-30 +(-40/5) * ...
从零开始实现一个简易的Java MVC框架(六)--加强AOP功能
前言在前面从零开始实现一个简易的Java MVC框架(四)--实现AOP和从零开始实现一个简易的Java MVC框架(五)--引入aspectj实现AOP切点这两节文章中已经实现了AOP功能并且引用 ...

jq实现一个简易的选项卡

jq实现一个简易的选项卡相关推荐

最新文章

热门文章