三角形导航 如何修改这个jquery达到卡tab切换的效果

林墨清染 2013-06-04 04:31:05
<!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/html; charset=utf-8" />
<script src="http://www.cnetview.com/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<title>Menu</title>
<style type="text/css">
ul, li {
list-style-type:none;
padding: 0px;
margin: 0px;
}

#menu-content {
overflow: hidden;
width:1200px;
margin:0 auto;
}

#menu {
float: left;
height:41px;
overflow: hidden;
background:url(http://www.cnetview.com/images/bg_out.gif) repeat-x;
}

#menu li {
float:left;
line-height:41px;
padding-left: 21px;
padding-right:21px;
margin-left: -11px;
overflow:hidden;
width:269px;
text-align:center;
}

#menu li a {
display:block;
color:#FFF;
font-size:14px;
}

.li_out {
background:url(http://www.cnetview.com/images/arrow_out.gif) no-repeat;
}

.li_over {
cursor:hand;
background:url(http://www.cnetview.com/images/arrow_next_over.gif) no-repeat;
color:white;
}

.li_next_over {
cursor: hand;
background:url(http://www.cnetview.com/images/arrow_over.gif) no-repeat;
}

.div_over {
background: url(http://www.cnetview.com/images/bg_over.gif) repeat-x;
padding-left: 11px;
margin-left: -11px;
margin-right: -10px;
padding-right: 10px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#menu").children("li").hover(
function(){
$(this).addClass("li_over");
$(this).next().addClass("li_next_over");
$(this).children("a").addClass("div_over");
},
function(){
$(this).removeClass("li_over");
$(this).next().removeClass("li_next_over");
$(this).children("a").removeClass("div_over");
}
);
});
</script>

</head>

<body>
<div>
<div id="menu-content">
<ul id="menu">
<li class="li_out"><a href="#">正在展览</a></li>
<li class="li_out"><a href="#">即将展览</a></li>
<li class="li_out"><a href="#">展览回顾</a></li>
<li class="li_out" style="width:290px; padding-right:0"><a href="#">展览申办</a></li>
</ul>
</div>
</div>
</body>
</html>
...全文
196 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
persuit666 2013-06-06
  • 打赏
  • 举报
 回复 
<!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/html; charset=utf-8" />
 <script src="http://www.cnetview.com/js/jquery-1.4.2.min.js" type="text/javascript"></script>
 <title>Menu</title>
 <style type="text/css">
 ul, li { 
 list-style-type:none; 
 padding: 0px;
 margin: 0px;
 } 

 #menu-content {
 overflow: hidden;
 width:1200px;
 margin:0 auto;
 }

 #menu {
     float: left;
 height:41px; 
 overflow: hidden;
 background:url(http://www.cnetview.com/images/bg_out.gif) repeat-x;
 } 

 #menu li { 
 float:left; 
 line-height:41px; 
 padding-left: 21px;
 padding-right:21px;
 margin-left: -11px;
 overflow:hidden;
 width:269px;
 text-align:center;
 } 

 #menu li a {
 display:block;
 color:#FFF;
 font-size:14px;
 border:1px solid red;
 }

 .li_out {
 background:url(http://www.cnetview.com/images/arrow_out.gif) no-repeat;
 }

 .li_over {
 cursor:hand;
 background:url(http://www.cnetview.com/images/arrow_next_over.gif) no-repeat;
 color:white;
 }

 .li_next_over {
 cursor: hand;
 background:url(http://www.cnetview.com/images/arrow_over.gif) no-repeat;
 }

 .div_over {
 background: url(http://www.cnetview.com/images/bg_over.gif) repeat-x;
 padding-left: 11px;
 margin-left: -11px;
 margin-right: -10px;
 padding-right: 10px;
 }
 </style>
 <script type="text/javascript"> 
//这里是点击切换的
 var lastIndex=null;//上次选中的li
 $(document).ready(function(){

$("#menu").children("li").click(
 function(){
 $(this).addClass("li_over");

 $(this).next().addClass("li_next_over");
 $(this).children("a").addClass("div_over");


 $(this).siblings().removeClass("li_over");
 $(this).siblings().children("a").removeClass("div_over");
 
 if(lastIndex!=null)
	$("#menu").children("li:eq("+lastIndex+")").next().removeClass("li_next_over");

lastIndex=$("#menu").children("li").index($(this));//记录下当前li的序号
 }

 );
	//默认选中第n个
	var i=0;//这里自己修改
	//var i=n;
	$("#menu").children("li:eq("+i+")").trigger('click');
 })

 </script>

<!--这里是放上去的
<script type="text/javascript"> 
 $(document).ready(function(){
 $("#menu").children("li").hover(
 function(){
 $(this).addClass("li_over");
 $(this).next().addClass("li_next_over");
 $(this).children("a").addClass("div_over");
 },
 function(){
 $(this).removeClass("li_over");
 $(this).next().removeClass("li_next_over");
 $(this).children("a").removeClass("div_over");
 }
 );
 }); 
 </script>-->
 </head>

 <body>
   <div>
   <div id="menu-content">
 <ul id="menu">
 <li class="li_out"><a href="#">正在展览</a></li>
 <li class="li_out"><a href="#">即将展览</a></li>
 <li class="li_out"><a href="#">展览回顾</a></li>
 <li class="li_out" style="width:290px; padding-right:0"><a href="#">展览申办</a></li>
 </ul>
   </div>
   </div>
 </body>
 </html>
默认是选中的，选中第几个你自己可以设置。选中后，其他选项卡放上去的效果没法再作了，因为你得再提供个中间效果图片。
persuit666 2013-06-05
  • 打赏
  • 举报
 回复
是改成点击切换吗？ 代码如下： 
<!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/html; charset=utf-8" />
 <script src="http://www.cnetview.com/js/jquery-1.4.2.min.js" type="text/javascript"></script>
 <title>Menu</title>
 <style type="text/css">
 ul, li { 
 list-style-type:none; 
 padding: 0px;
 margin: 0px;
 } 

 #menu-content {
 overflow: hidden;
 width:1200px;
 margin:0 auto;
 }

 #menu {
     float: left;
 height:41px; 
 overflow: hidden;
 background:url(http://www.cnetview.com/images/bg_out.gif) repeat-x;
 } 

 #menu li { 
 float:left; 
 line-height:41px; 
 padding-left: 21px;
 padding-right:21px;
 margin-left: -11px;
 overflow:hidden;
 width:269px;
 text-align:center;
 } 

 #menu li a {
 display:block;
 color:#FFF;
 font-size:14px;
 }

 .li_out {
 background:url(http://www.cnetview.com/images/arrow_out.gif) no-repeat;
 }

 .li_over {
 cursor:hand;
 background:url(http://www.cnetview.com/images/arrow_next_over.gif) no-repeat;
 color:white;
 }

 .li_next_over {
 cursor: hand;
 background:url(http://www.cnetview.com/images/arrow_over.gif) no-repeat;
 }

 .div_over {
 background: url(http://www.cnetview.com/images/bg_over.gif) repeat-x;
 padding-left: 11px;
 margin-left: -11px;
 margin-right: -10px;
 padding-right: 10px;
 }
 </style>
 <script type="text/javascript"> 
 var lastIndex=null;//上次选中的li
 $(document).ready(function(){

$("#menu").children("li").click(
 function(){
 $(this).addClass("li_over");

 $(this).next().addClass("li_next_over");
 $(this).children("a").addClass("div_over");


 $(this).siblings().removeClass("li_over");
 $(this).siblings().children("a").removeClass("div_over");
 
 if(lastIndex!=null)
	$("#menu").children("li:eq("+lastIndex+")").next().removeClass("li_next_over");

lastIndex=$("#menu").children("li").index($(this));//记录下当前li的序号
 }

 )
 })

 </script>

 </head>

 <body>
   <div>
   <div id="menu-content">
 <ul id="menu">
 <li class="li_out"><a href="#">正在展览</a></li>
 <li class="li_out"><a href="#">即将展览</a></li>
 <li class="li_out"><a href="#">展览回顾</a></li>
 <li class="li_out" style="width:290px; padding-right:0"><a href="#">展览申办</a></li>
 </ul>
   </div>
   </div>
 </body>
 </html>
林墨清染 2013-06-05
  • 打赏
  • 举报
 回复
拜托看清楚再回复
林墨清染 2013-06-05
  • 打赏
  • 举报
 回复
能否预先选中一个 点击后再切换 http://www.cnetview.com/Exhibit/List?cid=11
林墨清染 2013-06-05
  • 打赏
  • 举报
 回复
是的~~ onclick切换~~~
街头小贩 2013-06-04
  • 打赏
  • 举报
 回复
你写的代码真是奇葩 

<!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/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<title>无标题文档</title>
<style type="text/css">
ul{list-style:none;} 
#menu-content{
}

#menu{
} 

#menu li{ 
} 

#menu li a{
}

.li_out{
}

.li_over{
background-color:#f00;
}

.li_next_over{
font-color:green;
}

.div_over{
background-color:#000;
}
.on{width:290px;padding-right:0}
</style>
</head>

<body>
  <div>
  	<div id="menu-content">
		<ul id="menu">
			<li class="li_out"><a href="#">正在展览</a></li>
			<li class="li_out"><a href="#">即将展览</a></li>
			<li class="li_out"><a href="#">展览回顾</a></li>
			<li class="li_out on"><a href="#">展览申办</a></li>
		</ul>
  	</div>
  </div>
<script type="text/javascript">
jQuery(function($){
	$("#menu").find("li").hover(
		function(){
			$(this).addClass("li_over");
			$(this).next().addClass("li_next_over");
			$(this).children("a").addClass("div_over");
		},
		function(){
			$(this).removeClass("li_over");
			$(this).next().removeClass("li_next_over");
			$(this).children("a").removeClass("div_over");
		});
});
</script>
</body>
</html>
jquery实现下拉菜单的手风琴效果
主要为大家详细介绍了jquery实现下拉菜单的手风琴效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用jQuery和Swiper库实现时间轴式的选项卡滑动切换显示效果
在本文中，我们将介绍如何使用jQuery和Swiper库创建一个具有时间轴式外观的选项卡，并实现滑动切换显示效果。现在，当你在浏览器中打开这个页面时，你应该可以看到一个具有时间轴式外观的选项卡，并且可以通过滑动来切换显示不同的选项卡内容。/* 设置活动选项卡的背景色 */我们使用了Flex布局来水平排列选项卡，并设置了选项卡的宽度、高度、背景色和边框样式。/* 设置选项卡的边框样式 *//* 设置选项卡之间的间距 *//* 设置选项卡的背景色 *//* 设置选项卡的宽度 *//* 设置选项卡的高度 */
前端实现tab栏切换，这么常见的案例你学会了吗？
tab栏切换制作是我们web开发中一个十分常见的案例，今天在这里写写，希望对大家有所帮助，还是要用到我们上节写到的排他思想！好好学哦！
HTML简单的自定义属性制作tab切换
今天做淘宝页面时候碰到一个tab切换 如下图所示： 当我鼠标移到第一个tab时候 那个小三角形在第一个tab项里 移到第二个时候 就到了第二个里面 这种效果 我这里用了个小技巧 就是在HTML中自定义属性 以前也碰到过这种类似的 所以今天也有必要分享下 当然我在测试时候 没有把所有的背景图片合并在一起 这是为了测试而已 当然没有合并图片有几个小缺点 第一当我...
前端常用效果（2）带效果的tab切换
先上效果, 代码引用了jquery的框架 复制代码 功能实现比较简单，代码如下所示： html代码如下 <div class='tabchouse'> <!--设置元素位置--> <ul> <!--元素内容--> <li class='act...
JavaScript

87,991

社区成员

224,687

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章