使用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>

 

 

posted @ 2010-07-06 14:18  litao6664  阅读(265)  评论(0编辑  收藏  举报