jquery选项卡切换源码

用jquery做选项卡且带有动画效果

<div class="box">

<ul class="header">

<li class="head">娱乐</li>

<li class="zhong">科技</li>

<li class="last">社会</li>

</ul>

</div>

<div class="box2">

<div class="bon">

<ul>

<li>

<ul>

<li>《快本》韩庚首谈恋爱细节 没想到女方为他改变了这么多</li>

<li>夫妻有爱日常:孙怡取关董子健,还问“他是谁”</li>

<li>领证了?罗志祥周扬青庆祝纪念日这样秀恩爱</li>

<li>明星演农民:孙红雷痞气十足,成龙扮相接地气,王宝强细节最真实</li>

</ul>

</li>

<li>

<ul>

<li>2007年7月,jQuery 1.1.3版发布</li>

<li>jQuery的性能达到了Prototype</li>

<li>jQuery UI中包含大量预定义好的部件</li>

<li>2009年1月,jQuery 1.3版发布,它使用了全新的选择符引擎Sizzle</li>

</ul>

</li>

<li>

<ul>

<li>John Resig提议改进Prototype的“Behaviour”库</li>

<li>具有高效灵活的css选择器</li>

<li>jQuery的核心特性可以总结为</li>

<li>jQuery是一个快速、简洁的JavaScript框架</li>

</ul>

</li>

</ul>

</div>

</div>

* {

margin:0;

padding:0;

}

li {

list-style:none;

}

body {

font-size:14px;

}

.box {

width:500px;

height:30px;

margin:0 auto;

margin-top:20px;

}

.header>li {

float:left;

width:80px;

background:#ddd;

text-align:center;

line-height:30px;

cursor:pointer;

}

.zhong {

margin-left:20px;

}

.last {

margin-left:20px;

}

.box2 {

width:500px;

margin:0 auto;

position:relative;

overflow:hidden;

}

.bon {

width:1000%;

}

.bon ul li {

float:left;

width:500px;

padding-top:14px;

}

.bon ul li ul li:first-child {

padding-top:5px;

}

$(".header>li").eq(0).css("background", "#8B0000").css("color", "white")

$(".box ul li").mouseover(function() {

var index = $(this).index()

var w = $(".box2 .bon ul li").width()

$(".bon").stop().animate({ //.stop在此处添加

"marginLeft": -w * index

})

$(this).css("background", "#8B0000").css("color", "white").siblings().css("background", "#ddd").css("color", "#000000")

})

 

作者:小屋
链接:http://www.rumenwu.com/operate/621.html
来源:入门屋
入门屋著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。部分内容复制其他平台,如有侵权请联系删除。

(1)
打赏 支付宝打赏 支付宝打赏 微信打赏 微信打赏
上一篇 2018-04-19 00:41
下一篇 2018-04-26 23:50

相关推荐

  • 被吹爆的私域到底是什么?

    关于私域流量运营的文章大家应该看过了很多,但有一个基本点是我们所忽略的:很多人对私域原点的认知是不清晰的。到底什么才是私域?私域为什么会产生价值?网上有各种各样的私域定义,今天本文作者从以下五个方面来阐述,帮助大家深刻建议对私域的认知。 一、私域的本质是流量 这是首当其冲要解释的一点,最重要的是对微信私域的认知。 村长之前也解释过,为什么要把那么多人导流到微…

    2021-03-03
    4430
  • 教育大公司玩转短视频账号,为什么这么难?

    如今短视频占据了很多用户的休闲娱乐时间,短视频平台也成了各个商家的引流平台;各种教育公司也在短视频平台上进行线上教育的普及和产品的投放,但是教育的短视频孵化和变现并不容易;本文作者分析了教育公司运营短视频账号的现状,我们一起来看一下。 跟身边做教育的朋友聊了聊他们最近运营抖音、快手账号的进展,朋友叙述的过程里频频叹气,言语间透露出身处教育公司的运营做短视频的…

    2020-10-10
    8280
  • 视频号管理助手,批量管理多个账号,一键分发全平台

    视频号管理助手,批量管理多个账号,一键分发全平台 现在无论个人还是机构企业,为了获得更多流量,都会注册开通搜狐号、网易等10多个自媒体平台,如果你分发图文,15个平台保底1小时。如果你只分发视频,15个平台至少需要2个小时同时还得上传分发都成功,达到想要的后,会发现内容全网发布,除了麻烦就是麻烦,如果你招聘了员工,那么更头疼。下面小编教你轻松解决这些琐事。 …

    2022-07-19
    3560
  • 网页meta标签怎么写?常用的meta标签

    元数据(metadata)是关于数据的信息。 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。 典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。 标签始终位于 head 元素中。 元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。 …

    2018-07-26
    1.8K0
  • 喜马拉雅的引流策略

    萝卜青菜,各有所爱。 有人喜欢奶头乐的短视频,有人喜欢泛知识的图文,也有人喜欢听书做乐。 喜马拉雅,一个被选择性忽略掉的引流渠道。 为什么会被忽略?因为喜马拉雅短期内做不出效果。 大家都喜欢快的,喜欢短的,偏向短平快的引流方式。 其实喜马拉雅这个平台的流量不少,粉丝垂直且付费意识强。 秀才认识一个朋友,在喜马拉雅讲了一年的音频,流量从0到每天能加几十个,一年…

    2021-02-20
    5050
  • 微信、B站、抖音、快手、小红书等7大平台玩法详解,一文读懂!

    前有微信、微博老牌霸主,后有抖音、快手、B站等群雄逐鹿,随着众多社交媒体平台的崛起,许多品牌的营销动作也开始向这些平台迁移。 但如何选择平台,并根据平台优势选择对应的营销策略,对于当下许多品牌来讲,却是个棘手的问题。 为此,馒头商学院邀请了艾加营销北京事业部副总经理范小杰,为馒头的用户做了一场关于《全域流量运营—破解后流量时代营销增长力》的直播分享。 范小杰…

    2020-11-12
    1.0K0