< !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 >
         < title > </title>
         < script src ="./jquery-1.3.2.min.js" type ="text/javascript" > </script>

         < style type ="text/css" >
                .tab
                {
                        background-color: #FAFAFA;
                        margin: 5px 8px;
                        padding: 5px 10px;
                }
                .tab p span
                {
                        background-color: #EFEFEF;
                        border: 1px solid #CCCCCC;
                        cursor: pointer;
                        margin-right: 6px;
                        padding: 2px 5px;
                }
                .tab p span.current
                {
                        background-color: #FAFAFA;
                        border-bottom-color: #fafafa;
                }
                .tab p
                {
                        border-bottom: 1px solid #CCCCCC;
                        font-weight: bold;
                        padding: 0 10px 2px;
                }
                .tab li
                {
                        border-bottom: 1px dotted #CCCCCC;
                        padding-bottom: 3px;
                        margin: 5px 0;
                }
                .tab .mhot, .tab.allhot
                {
                        display: none;
                }
         </style>

         < script type ="text/javascript" >
                $(document).ready(function() {
                        $(".tab span:first").addClass("current"); //为第一个SPAN添加当前效果样式
                        $(".tab ul:not(:first)").hide(); //隐藏其它的UL
                        $(".tab span").mouseover(function() {
                                $(".tab span").removeClass("current"); //去掉所有SPAN的样式
                                $(this).addClass("current");
                                $(".tab ul").hide();
                                $("."+$(this).attr("id")).fadeIn('slow');
                        });
                });
         </script>
</head>
< body >
         < div class ="tab" >
                 < p >
                         < span id ="tab1" >tab1 </span> < span id ="tab2" >tab2 </span> < span id ="tab3" >tab3 </span> </p>
                 < ul class ="tab1" >
                         < li >我和我的祖国 </li> < li >最爱的地方 </li> < li >我和我 </li> </ul>
                 < ul class ="tab2" >
                         < li >一花一世办 </li> < li >一草一天堂 </li> </ul>
                 < ul class ="tab3" >
                         < li >阿里巴巴 </li> < li >阿里巴巴 </li> < li >一草一天堂 </li> < li >我和我的祖国 </li> < li >最爱的地方 </li> </ul>
         </div>
</body>
</html>