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

相关推荐

  • 用css绘制六边形的div

    用css绘制六边形的div

    2019-01-08
    3.5K0
  • 一支视频全网播放量超1亿,知识类创作成为流量香饽饽?

    2020年,对知识区的布局成为各大视频平台内容战略的一大重点。 抖音、快手凭借短视频持续收割流量,并利用自己庞大的用户基础,积极开拓知识内容领域,获得不俗成绩。但这篇文章,卡思数据(ID:caasdata6)主要研究的是以B站、西瓜视频和知乎为代表的平台,这些平台视频时长多在1分钟-30分钟之间,他们为何要扎堆布局知识科普类内容领域?有何发展重点?在内容创作…

    2020-11-12
    1.1K0
  • 喜马拉雅的引流策略

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

    2021-02-20
    7920
  • 流量相关词汇

    PVPage View,浏览量,在一个统计周期内,浏览页面的数之和 UVUnique Visitor,访客数,在一个统计周期内,访问网站的人数之和 VVVideo View,视频播放数,在一个统计周期内,视频被打开的次数之和 CVContent Views,内容播放数,在一个统计周期内,视频被打开,且视频正片内容(除广告)被成功播放的次数之和 DAUDail…

    2020-07-02
    1.2K0
  • chrome浏览器CSS字体大小小于12px不起作用解决方法

    chrome浏览器不能显示字体大小小于12px解决方法,CSS设置小于12px字体不起作用的解决方法篇。 无论中文英文数字在网页中CSS设置小于12px后各大浏览器均支持,在谷歌chrome浏览器不支持解决方法。 针对低版本chrome谷歌浏览器设置一个校准字体大小样式: -webkit-text-size-adjust:none 用法: body{-web…

    2018-03-18
    2.1K0
  • 被吹爆的私域到底是什么?

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

    2021-03-03
    6560