jQuery选项卡问题，哪位大侠帮忙看看啊


<!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 content="ie=7" http-equiv="x-ua-compatible">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery</title>
<meta name="keywords" content="{dede:field name='keywords'/}" />
<meta name="description" content="{dede:field name='description' /}" />
<script type="text/javascript" src="http://css-tricks.com/examples/MenuFader/js/jquery.js"></script>
<script>
 $(function(){
  var $menu_li = $(".tab_menu ul li");
      $menu_li.mouseover(function(){
 $menu_li.css({cursor:"pointer"});
 $(this).addClass("selected").siblings().removeClass("selected");
var index = $menu_li.index(this);
$("div.tab_con > div").siblings().hide().eq(index).show();
$("div.tab_con > div");
 
  });
</script>
</head>
<style>
.tab_menu{
width:290px;
overflow:hidden;}
.tab_menu ul li{
float:left;
height:30px;
width:80px;
margin:5px 5px 3px; 5px;
text-align:center;
line-height:32px;
border:1px  solid #FFCC00;
background-color:#FFFFF7;}
.tab_menu ul li.selected{ background-color:#EFF7FF;}
.tab_con{
width:264px;
clear:both;
float:left;}
.tab_con div{
width:264px;
height:300px;
margin-left:5px;
background-image:#FFFFF7;
border:1px solid #FFCC00;}
.hide{
display:none;}
</style>
<body style="color:#A9C9E2;">
<div class="tab_menu">
   <ul>
      <li class="selected">选项1</li>
  <li>选项2</li>
  <li>选项3</li>
 
   </ul>
</div>
<div class="tab_con">
   <div>内容1</div>
   <div class="hide">内容2</div>
   <div class="hide">内容3</div>
    <div class="hide">内容4</div>
 <div class="hide">内容5</div>
  <div class="hide">内容6</div></div>
</body>
那个大哥大姐帮忙看看啊  小弟刚接触jQuery。不太懂啊

解决方案 »

  1.   

    就是脚本最后少写了});
    <title>jquery</title>
    <meta name="keywords" content="{dede:field name='keywords'/}" />
    <meta name="description" content="{dede:field name='description' /}" />
    <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script>
    $(function(){
         var $menu_li = $(".tab_menu ul li");
          $menu_li.mouseover(function(){
             $menu_li.css({cursor:"pointer"});    
             $(this).addClass("selected").siblings().removeClass("selected");        
                var index = $menu_li.index(this);
                $("div.tab_con > div").siblings().hide().eq(index).show();
                $("div.tab_con > div");
         
         });
    });
        </script>
    </head>
    <style>
    .tab_menu{
        width:290px;
        overflow:hidden;}
    .tab_menu ul li{
        float:left;
        height:30px;
        width:80px;
        margin:5px 5px 3px; 5px;
        text-align:center;
        line-height:32px;
        border:1px  solid #FFCC00;
        background-color:#FFFFF7;}
    .tab_menu ul li.selected{    background-color:#EFF7FF;}
    .tab_con{
        width:264px;
        clear:both;
        float:left;}
    .tab_con div{
            width:264px;
            height:300px;
            margin-left:5px;
            background-image:#FFFFF7;
            border:1px solid #FFCC00;}
    .hide{
        display:none;}
    </style>
    <body style="color:#A9C9E2;">
    <div class="tab_menu">
       <ul>
          <li class="selected">选项1</li>
          <li>选项2</li>
          <li>选项3</li>
         
       </ul>
    </div>
    <div class="tab_con">
       <div>内容1</div>
       <div class="hide">内容2</div>
       <div class="hide">内容3</div>
        <div class="hide">内容4</div>
         <div class="hide">内容5</div>
          <div class="hide">内容6</div></div>
    </body>
      

  2.   

    <html>
    <head>
    <meta content="ie=7" http-equiv="x-ua-compatible">
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>jquery</title>
    <meta name="keywords" content="{dede:field name='keywords'/}" />
    <meta name="description" content="{dede:field name='description' /}" />
    <style>
    .tab_menu{
        width:290px;
        overflow:hidden;}
    .tab_menu ul li{
        float:left;
        height:30px;
        width:80px;
        margin:5px 5px 3px; 5px;
        text-align:center;
        line-height:32px;
        border:1px  solid #FFCC00;
        background-color:#FFFFF7;}
    .tab_menu ul li.selected{    background-color:#EFF7FF;}
    .tab_con{
        width:264px;
        clear:both;
        float:left;}
    .tab_con div{
            width:264px;
            height:300px;
            margin-left:5px;
            background-image:#FFFFF7;
            border:1px solid #FFCC00;}
    .hide{
        display:none;}
    </style>
    <script type="text/javascript" src="http://css-tricks.com/examples/MenuFader/js/jquery.js"></script>
    <script> (function($){
    $.fn.extend({
    tabs : function(){
    return this.each(function(){
     $(this).children().each(function(){
    var $this = $(this);
    $this.click(function(){
    if($this.hasClass("selected")) return ;
    $this.addClass("selected");
    $this.siblings().each(function(){
    if($(this).hasClass("selected")){
    $(this).removeClass("selected");
    $("#"+$(this).attr("rel")).addClass("hide");
    }
         
    });
    $("#"+$this.attr("rel")).removeClass("hide");
    });
    });
    });
    }
    });
    })(jQuery);
    $(document).ready(function(){
    $(">ul",".tab_menu").tabs();
    });</script>
    </head>
    <body style="color:#A9C9E2;">
    <div class="tab_menu">
       <ul>
          <li class="selected" rel="div1">选项1</li>
          <li rel="div2">选项2</li>
          <li rel="div3">选项3</li>
       </ul>
    </div>
    <div class="tab_con">
       <div id="div1">内容1</div>
       <div id="div2" class="hide">内容2</div>
       <div id="div3" class="hide">内容3</div>
        <div class="hide">内容4</div>
         <div class="hide">内容5</div>
          <div class="hide">内容6</div></div>
    </body>