Jquery选项卡的实现方法

首先呢，要想实现选项卡的功能，我们就必须用到 jquery的 tabs插件  而且还要用到相关的几个 Js

我先把  需要引用的 css和 js 列出来   大家看一下

  <link href="css/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
    <script src="js/jquery.ui.core.js" type="text/javascript"></script>
    <script src="js/jquery.ui.widget.js" type="text/javascript"></script>
    <script src="js/jquery.ui.tabs.js" type="text/javascript"></script>
    <link href="css/base/jquery.ui.base.css" rel="stylesheet" type="text/css" />
    <link href="css/base/jquery.ui.theme.css" rel="stylesheet" type="text/css" />
    <link href="css/demos.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">

 

还有一个 JQ 方法

   <script type="text/javascript">
 $(function() {
  $( "#tabs" ).tabs({
   event: "mouseover"
  });
 });
 </script>

 

前台代码

<div id="tabs">
 <ul>
  <li><a href="#tabs-1">上传音乐</a></li>
  <li><a href="#tabs-2">我的上传</a></li>  
 </ul>
 <div id="tabs-1" style="background-color:Black">
  
   
  
     <table class="ui-accordion">
            <tr>
                <td style="font-size: 12px; color: #FFFFFF;">
                    选择歌曲：<asp:FileUpload
                        ID="FileUpload1" runat="server" Height="19px" Width="215px" />
                    <asp:Button ID="BtnUpload" runat="server" οnclick="BtnUpload_Click"
                        Text="确定上传" />
                </td>
            </tr>
            <tr>
                <td style="font-size: 12px; color: #FFFFFF;">
                    Ps：请上传10M以下的文件，请注册帐号登录后上传以免地址失效！</td>
            </tr>
            <tr>
                <td style="font-size: 12px">
                    <asp:Label ID="Label1" runat="server" Text="您还没有登录，还不能上传歌曲。"
                        ForeColor="#CCFF33"></asp:Label>
                    <asp:LinkButton ID="LinkButton1" runat="server" ForeColor="#FF0066">注册账号？</asp:LinkButton>
                </td>
            </tr>
        </table>
  
   
  
 </div>
 <div id="tabs-2" style="background-color:Black">
   <table class="ui-accordion">
            <tr>
                <td style="font-size: 12px; font-weight: bold; color: #FFFFFF;">
                    会员：<asp:TextBox ID="TxtHuiyuan" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td style="font-size: 12px; font-weight: bold">
                    &nbsp;</td>
            </tr>
            <tr>
                <td style="font-size: 12px; font-weight: bold; color: #FFFFFF;">
                    密码：<asp:TextBox ID="TxtPass" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td style="font-size: 12px; font-weight: bold">
                    &nbsp;</td>
            </tr>
            <tr>
                <td style="font-size: 12px; font-weight: bold">
                    <asp:ImageButton ID="ImgBtnRegister" runat="server"
                        ImageUrl="~/images/register.jpg" οnclick="ImgBtnRegister_Click" />
                    <asp:ImageButton ID="ImgBtnLogin" runat="server"
                        ImageUrl="~/images/login.jpg" οnclick="ImgBtnLogin_Click" />
                </td>
            </tr>
        </table>
 </div>
 
</div>