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

<!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>jQuery导航

解决方案 »

  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/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>
      

  2.   

    是改成点击切换吗？
    代码如下：
    <!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> 
      

  3.   

    能否预先选中一个 点击后再切换
    http://www.cnetview.com/Exhibit/List?cid=11
      

  4.   

    <!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> 
    默认是选中的，选中第几个你自己可以设置。选中后，其他选项卡放上去的效果没法再作了，因为你得再提供个中间效果图片。