使用JQuery实现Tab（结合vs2008，aspx页面）

前台：

 

代码

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeBehind = " WebForm1.aspx.cs "  Inherits = " PandaRG.NB.OurSchoolWeb.WebApplication.WebForm1 "   %>

<! 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  runat ="server" >
     < title ></ title >

     < script  type ="text/javascript"  src ="JScripts/jquery-1.3.2-vsdoc2.js" ></ script >

     < link  href ="App_Themes/Stylesheet1.css"  rel ="stylesheet"  type ="text/css"   />

     < script  type ="text/javascript" >
        $(document).ready( function ()
        {
            $( " #tab-title span " ).mouseover( function ()
            {
                $( this ).addClass( " selected " ).siblings().removeClass();
                $( " #tab-content > ul " ).eq($( ' #tab-title span ' ).index( this )).show().siblings().hide();
            });
        });

     </ script >

</ head >
< body >
     < form  id ="form1"  runat ="server" >
     < asp:ScriptManager  ID ="ScriptManager1"  runat ="server"  EnablePageMethods ="true" >
     </ asp:ScriptManager >
     < div  id ="sidebar-tab" >
         < div  id ="tab-title" >
             < h3 >
                 < span  class ="selected" > 最新评论 </ span >< span > 近期热评 </ span >< span > 随机文章 </ span ></ h3 >
         </ div >
         < div  id ="tab-content" >
             < ul >
                 <? php wkc_recent_comments('number=10&length=25');  ?> pinglun1 </ ul >
             < ul  class ="hide" >
                 <? php wkc_most_commented_posts('number=10&days=300');  ?> jqrp1 </ ul >
             < ul  class ="hide" >
                 <? php wkc_random_posts('number=10&length=40');  ?> sjwz1 </ ul >
         </ div >
     </ div >
     </ form >
</ body >
</ html >

 

 

转载于:https://www.cnblogs.com/litaocnblogs/archive/2010/07/06/1772119.html