有谁能给我做个京东商城右侧的那种选项卡切换的Javascript效果~

JavaScript016

有谁能给我做个京东商城右侧的那种选项卡切换的Javascript效果~,第1张

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>jquery tab选项卡 ajax选项卡 静态选项卡 鼠标点击选项卡 鼠标滑过选项卡</title>

<style type="text/css">

*{margin:0padding:0list-style-type:none}

a,img{border:0}

body{font:12px/180% Arial, Helvetica, sans-serif,"宋体"}

a{color:#333text-decoration:none}

a:hover{color:#3366cctext-decoration:underline}

h2{font-size:14pxtext-align:center}

/* tabbox */

.tabbox{width:432pxmargin:20px autoposition:relativeheight:171pxoverflow:hidden}

.tabbox .tabbtn{height:30pxbackground:url(images/tabbg.gif) repeat-xborder-left:solid 1px #dddborder-right:solid 1px #ddd}

.tabbox .tabbtn li{float:leftposition:relativemargin:0 0 0 -1px}

.tabbox .tabbtn li a,.tabbox .tabbtn li span{display:blockfloat:leftheight:30pxline-height:30pxoverflow:hiddenwidth:108pxtext-align:centerfont-size:12pxcursor:pointer}

.tabbox .tabbtn li.current{border-left:solid 1px #d5d5d5border-right:solid 1px #d5d5d5border-top:solid 1px #c5c5c5}

.tabbox .tabbtn li.current a,.tabbox .tabbtn li.current span{border-top:solid 2px #ff6600height:27pxline-height:27pxbackground:#fffcolor:#3366ccfont-weight:800}

.tabbox .loading{height:40pxwidth:432pxtext-align:centerposition:absoluteleft:0top:120px}

.tabbox .tabcon{padding:10pxborder-width:0 1px 1px 1pxborder-color:#dddborder-style:solid}

.tabbox .tabcon li{height:24pxline-height:24pxoverflow:hidden}

.tabbox .tabcon li span{margin:0 10px 0 0font-family:"宋体"font-size:12pxfont-weight:400color:#ddd}

</style>

</head>

<body>

<h2>静态 选项卡 滑过事件</h2>

<div class="tabbox" id="statetab">

<ul class="tabbtn">

<li class="current"><a href="#">jquery 特效</a></li>

<li><a href="#">javascript 特效</a></li>

<li><a href="#">div+css 教程</a></li>

<li><a href="#">HTML5 特效</a></li>

</ul><!--tabbtn end-->

<div class="tabcon">

<ul>

<li><span>▪</span><a href="#" title="jquery 图片特效插件 异步读取图片TOP排行榜特效">jquery 图片特效插件 异步读取图片TOP排行榜特效</a></li>

<li><span>▪</span><a href="#" title="jquery 弹出层 点击按钮弹出层兼容IE和firefox浏览器">jquery 弹出层 点击按钮弹出层兼容IE和firefox浏览器</a></li>

<li><span>▪</span><a href="#" title="jquery 导航插件 一个动画导航下拉菜单Apycom软件的Java下拉菜单">jquery 导航插件 一个动画导航下拉菜单Apycom软件的Java下拉菜单</a></li>

<li><span>▪</span><a href="#" title="jquery soChange 切换插件 支持焦点图片切换 选项卡切换 带按钮与分页索引按钮切换">jquery soChange 切换插件 支持焦点图片切换 选项卡切换 带按钮与分页索引按钮切换</a></li>

<li><span>▪</span><a href="#" title="jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动">jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动</a></li>

</ul>

</div><!--tabcon end-->

<div class="tabcon">

<ul>

<li><span>▪</span><a href="#" title="javascript jscolor colorpicker js颜色选择器插件10多种调用颜色方法与取值">javascript jscolor colorpicker js颜色选择器插件10多种调用颜色方法与取值</a></li>

<li><span>▪</span><a href="#" title="javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>

<li><span>▪</span><a href="#" title="javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动">javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动</a></li>

<li><span>▪</span><a href="#" title="js多功能选项卡插件 选项卡自动切换内容图片延迟加载">js多功能选项卡插件 选项卡自动切换内容图片延迟加载</a></li>

<li><span>▪</span><a href="#" title=" javascript滚动图片按钮控制图片左右自动滚动">javascript滚动图片按钮控制图片左右自动滚动</a></li>

</ul>

</div><!--tabcon end-->

<div class="tabcon">

<ul>

<li><span>▪</span><a href="#" title="div+css制作非常实用的24款分页页码css代码">div+css制作非常实用的24款分页页码css代码</a></li>

<li><span>▪</span><a href="#" title="用div+css3美化制作动画导航特效鼠标滑过动画显示">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li>

<li><span>▪</span><a href="#" title="用div+css制作纯CSS下拉菜单，兼容IE6 IE7 IE8及以上 Firefox">用div+css制作纯CSS下拉菜单，兼容IE6 IE7 IE8及以上 Firefox</a></li>

<li><span>▪</span><a href="#" title="CSS如何定位工程">CSS如何定位工程</a></li>

<li><span>▪</span><a href="#" title="用div+css制作一个CSS3的泡泡动画按钮非常漂亮">用div+css制作一个CSS3的泡泡动画按钮非常漂亮</a></li>

</ul>

</div><!--tabcon end-->

<div class="tabcon">

<ul>

<li><span>▪</span><a href="#" title="jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果">jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果</a></li>

<li><span>▪</span><a href="#" title="制作CSS3和HTML5的一个单页网站模板">制作CSS3和HTML5的一个单页网站模板</a></li>

<li><span>▪</span><a href="#" title="jquery 幻灯片切换应用一个HTML5的幻灯片">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li>

<li><span>▪</span><a href="#" title="jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li>

</ul>

</div><!--tabcon end-->

</div><!--tabbox end-->

<script type="text/javascript" src="http://www.jsfoot.com/skin/js/jquery.js"></script>

<script type="text/javascript">

//ajax 选项卡

$('#ajaxtab .tabbtn li a').click(function(){

var thiscity = $(this).attr("href")

$("#ajaxtab .loading").ajaxStart(function(){

$(this).show()

})

$("#ajaxtab .loading").ajaxStop(function(){

$(this).hide()

})

$('#ajaxtab .tabcon').load(thiscity)

$('#ajaxtab .tabbtn li a').parents().removeClass("current")

$(this).parents().addClass("current")

return false

})

$('#ajaxtab .tabbtn li a').eq(0).trigger("click")

//tab plugins 插件

$(function(){

//选项卡鼠标滑过事件

$('#statetab .tabbtn li').mouseover(function(){

TabSelect("#statetab .tabbtn li", "#statetab .tabcon", "current", $(this))

})

$('#statetab .tabbtn li').eq(0).trigger("mouseover")

//选项卡鼠标滑过事件

$('#clicktab .tabbtn li').click(function(){

TabSelect("#clicktab .tabbtn li", "#clicktab .tabcon", "current", $(this))

})

$('#clicktab .tabbtn li').eq(0).trigger("click")

function TabSelect(tab,con,addClass,obj){

var $_self = obj

var $_nav = $(tab)

$_nav.removeClass(addClass),

$_self.addClass(addClass)

var $_index = $_nav.index($_self)

var $_con = $(con)

$_con.hide(),

$_con.eq($_index).show()

}

})

</script>

</body>

</html>

1、给每个导航选项一个属性，保存楼层id；

2、每个楼层都有一个id；

3、监听页面滚动事件，如果当前滚动到某一个楼层，就更新导航选中。

不一定非要是id，主要是维护两者对应关系。

给你一个类似的，需要展开的菜单你加一个样式默认隐藏，然后在JS里加一个事件显示就好了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>CSS+XHTML代码</title>

</head>

<style type="text/css">

/* ================================================================

This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html

is available at http://www.cssplay.co.uk/menus/page_menu2.html

Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.

This stylesheet and the associated (x)html may be modified in any

way to fit your requirements.

=================================================================== */

body {

background: #fff

font-family: "Lucida Grande", Helvetica, Arial, sans-serif

font-size: 12px

}

#hoverpage ul#outer li div p {font-size:12pxline-height:16pxmargin:5px 0 15px 0}

#hoverpage ul#outer li div h2 {line-height:1emcolor:#585font-size:1.5emfont-weight:normalmargin-top:0font-family:verdana, sans-serif}

#hoverpage ul#outer li div h3 {line-height:1emcolor:#66afont-size:1.2emfont-weight:normalmargin-top:0}

#hoverpage ul#outer li div h3.clear {clear:left}

#hoverpage {width:650pxheight:450pxborder:1px solid #aaabackground:#fffposition:relativez-index:500overflow:hiddentext-align:left}

#hoverpage table {border-collapse:collapsemargin:-1px}

#hoverpage ul#outer {background:transparentpadding:0margin:0list-style:none}

#hoverpage ul#outer li.page {display:inline} /* needed for IE to function correctly */

#hoverpage ul#outer li.page a.menuitem {text-decoration:none}

#hoverpage ul#outer li.page i {position:absolutedisplay:blockheight:25pxright:500pxbackground:transparentcursor:defaultz-index:100text-align:righttext-decoration:nonecolor:#080font-style:normalcursor:pointer}

#hoverpage ul#outer li.p1 i {top:30px}

#hoverpage ul#outer li.p2 i {top:55px}

#hoverpage ul#outer li.p3 i {top:80px}

#hoverpage ul#outer li.p4 i {top:105px}

#hoverpage ul#outer li.p5 i {top:130px}

#hoverpage ul#outer li.page div {display:blockwidth:600pxheight:400pxpadding:25pxfont-weight:normalcolor:#444}

#hoverpage ul#outer li.p1 div {background:#fff url(page1_back.jpg)}

#hoverpage ul#outer li.p2 div {background:#fff url(page2_back.jpg)}

#hoverpage ul#outer li.p3 div {background:#fff url(page3_back.jpg)}

#hoverpage ul#outer li.p4 div {background:#fff url(page4_back.jpg)}

#hoverpage ul#outer li.p5 div {background:#fff url(page5_back.jpg)}

#hoverpage ul#outer li div img {border:1px solid #888float:rightmargin:0 10px 5px 0}

#hoverpage ul#outer li div p.big {line-height:1emcolor:#004font-size:1.5em}

#hoverpage ul#outer li div a {color:#00ctext-decoration:underline}

#hoverpage ul#outer li div em {display:blockwidth:190pxheight:230pxfloat:leftbackground:transparent url(current.gif) no-repeatmargin-right:10px}

#hoverpage ul#outer li.p1 div em {background-position: 21px 0}

#hoverpage ul#outer li.p2 div em {background-position: 21px 25px}

#hoverpage ul#outer li.p3 div em {background-position: 21px 50px}

#hoverpage ul#outer li.p4 div em {background-position: 21px 75px}

#hoverpage ul#outer li.p5 div em {background-position: 21px 100px}

#hoverpage ul#outer li.page div a:hover {text-decoration:none}

#hoverpage ul#outer li.page a:hover {white-space:normal} /* for IE6 */

#hoverpage ul#outer :hover div {position:absoluteleft:0top:0}

#hoverpage ul#outer a:hover i {color:#66afont-weight:bold} /* for IE6 */

#hoverpage ul#outer :hover a i {color:#66afont-weight:bold}

#hoverpage ul#outer div ul li {line-height:20pxfont-size:0.9emcolor:#256list-style-type:disc}

#hoverpage ul#outer div ul li a {line-height:20pxfont-size:1.1emcolor:#c00}

#hoverpage ul#outer div dl dd {line-height:20pxfont-size:1.1emcolor:#448}

#hoverpage ul#outer div dl dt {line-height:30pxfont-size:1.3emcolor:#333}

</style>

<body>

<div id="hoverpage">

<ul id="outer">

<li class="page p1"><a href="#nogo" class="menuitem"><i>Products</i><!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<div>

<em></em>

<img src="bags.jpg" alt="" />

<h2>Products</h2>

<h3>Lorem Ipsum</h3>

<ul>

<li><a href="#nogo1">Integer nonummy neque.</a></li>

<li><a href="#nogo1">Aliquam accumsan.</a></li>

<li><a href="#nogo1">Nulla in sapien eget eros.</a></li>

<li><a href="#nogo1">Nam varius ante et risus.</a></li>

<li><a href="#nogo1">Phasellus at erat id metus.</a></li>

<li><a href="#nogo1">Donec malesuada ultricies.</a></li>

<li><a href="#nogo1">Duis quis purus sit amet.</a></li>

<li><a href="#nogo1">Morbi porta dapibus enim.</a></li>

</ul>

<h3 class="clear">Product Information</h3>

<p>Suspendisse potenti. Donec viverra molestie enim. Fusce fermentum, erat id cursus aliquam, mauris augue volutpat dolor, in interdum purus pede dictum diam. Morbi interdum diam at ligula. Morbi laoreet. Morbi mollis tristique justo. Etiam accumsan fermentum ipsum. Phasellus vestibulum, leo in dapibus ultricies, nisi nulla fermentum tortor, eu lobortis nibh urna ac dui. Aliquam erat volutpat. Curabitur vitae sapien sed libero dictum pellentesque. Praesent quis enim nec tellus congue hendrerit. Ut tellus. Morbi rhoncus elit lobortis libero.</p>

</div>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<li class="page p2"><a href="#nogo" class="menuitem"><i>Services</i><!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<div>

<em></em>

<img src="service.jpg" alt="" />

<h2>Services</h2>

<h3>Curabitur eget</h3>

<ul>

<li><a href="#nogo2">Suspendisse potenti.</a><br />Quisque at ante nec lacus cursus malesuada.</li>

<li><a href="#nogo2">Donec viverra molestie enim.</a><br />Sed ac tortor nec augue hendrerit pulvinar.</li>

<li><a href="#nogo2">Pellentesque habitant.</a><br />Nullam rhoncus hendrerit orci.</li>

<li><a href="#nogo2">Vivamus non turpis.</a><br />Sed lacinia egestas mi.</li>

</ul>

<h3 class="clear">Available Services</h3>

<p>Proin scelerisque justo quis ante. Maecenas vehicula orci quis arcu. Nam dictum lectus quis ipsum. In felis. Cras eu lectus. Nam sed est ut orci venenatis faucibus. Ut molestie massa non massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Curabitur eget magna a odio vestibulum laoreet. Vivamus faucibus tincidunt massa. Sed a nunc. Quisque varius sagittis libero.</p>

</div>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<li class="page p3"><a href="#nogo" class="menuitem"><i>Latest Information</i><!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<div>

<em></em>

<img src="news.jpg" alt="" />

<h2>Latest Information</h2>

<h3>Fusce fermentum</h3>

<ul>

<li><a href="#nogo3">Donec posuere enim a sapien.<br />Malesuada fames ac turpis egestas.</a></li>

<li>Vivamus dignissim tincidunt quam.</li>

<li>Nullam varius vestibulum mauris.</li>

<li>Curabitur faucibus varius dui.<br /><a href="#nogo3">Cras suscipit viverra felis. Nullam diam.</a></li>

<li>Vivamus convallis volutpat nunc.</li>

<li>Sed porttitor dui vel nunc.</li>

</ul>

<h3 class="clear">Latest Product Information</h3>

<p>Nam porttitor congue diam. Donec in mi. Fusce ac neque. Donec quis justo. Nunc non justo quis augue sagittis volutpat. Etiam quis ligula commodo augue tempus pulvinar. Morbi ante arcu, aliquam ut, consequat et, consequat sed, sem. Cras suscipit viverra felis. Nullam diam. Duis eros purus, ornare sit amet, viverra sed, laoreet ac, pede.</p>

</div>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<li class="page p4"><a href="#nogo" class="menuitem"><i>Press Release</i><!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<div>

<em></em>

<img src="press.jpg" alt="" />

<h2>Press Release</h2>

<h3>Quisque varius</h3>

<dl>

<dt>11th June 2007</dt>

<dd>In feugiat scelerisque pede.</dd>

<dd>Morbi iaculis eleifend ante.</dd>

<dd>Maecenas fringilla scelerisque erat.</dd>

<dd>Nam <a href="nogo5">accumsan</a>egestas eros.</dd>

</dl>

<h3 class="clear">News and Information</h3>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse vitae sem. <a href="nogo5">Class aptent taciti</a>sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec ut nunc. <a href="nogo5">In dictum, dui nec vehicula vehicula</a>, neque leo faucibus est, porta vehicula nisi odio eu tellus.</p>

</div>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<li class="page p5"><a href="#nogo" class="menuitem"><i>Contact us</i><!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<div>

<em></em>

<img src="contact.jpg" alt="" />

<h2>Contact us</h2>

<h3>Donec condimentum</h3>

<ul>

<li>Phasellus vitae arcu et mauris facilisis ornare.</li>

<li>Nullam ultrices <a href="#nogo5">urna nec erat</a>facilisis faucibus.</li>

<li>Ut cursus posuere eros.</li>

<li>Vestibulum <a href="#nogo5">dapibus</a>tortor eu nisl.</li>

<li>Proin ac mauris non lacus pharetra aliquet.</li>

</ul>

<h3 class="clear">Contact Details</h3>

<p>Praesent vehicula interdum massa. Nunc velit erat, pulvinar vitae, tempor non, porttitor non, ipsum. Nullam venenatis, quam a tincidunt semper, neque velit dictum quam, at mattis mauris mauris a dolor. Aliquam urna. <a href="nogo5">Ut pellentesque dapibus quam.</a>Mauris dapibus dictum felis. Praesent tellus quam, aliquet in, malesuada aliquet, pretium non, eros. Cras aliquam ligula vitae nunc.</p>

</div>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

</ul>

</div>

<br>

<br>

<br>

<div>

</div>

</body>

</html>

<script language=javascript ></script>