如何加载页面然后运行jQuery函数?

时间:2010-04-04 11:23:32

标签: jquery function load

在母版页上,我将此代码放在同一母版页中加载页面,然后运行jQuery函数

这是我的母版页标记:

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>
<!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>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />

    <script src="js/jquery-1.4.2.js" type="text/javascript"></script>

    <script type="text/javascript">

    $(document).ready(function() {
        $("#mainContactLink").click(function() {
       $(body).open("about-us.aspx", self);
            $("#mainContTable #abtContacts").fadeIn(1000).siblings("div").fadeOut(100);
            $("#mainContTable #abtContacts").siblings();
        });
    });

</script>
</head>
<body>
    <form id="form1" runat="server">

    <div id="mainContainer">
    <div id="subContainer">
    <div id="topNavigation">
    <ul id="topNav">
    <li><a href="Default.aspx">Home</a>

    </li>
    <li><a href="awards.aspx">Awards</a></li>
    <li><a href="projects.aspx">Projects</a>

    </li>
    <li><a href="NewsDetails.aspx">News</a></li>
    <li><a href="profile.aspx">Profile</a></li>
    <li><a href="about-us.aspx">About Us</a></li>
    </ul>

    </div>
    <div id="logoDiv">
        <img alt="logo" src="images/logo.png" />
    </div>
    <div id="mainContent" >
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
        </div>
        <div id="footer">
     <a href="careers.aspx">Careers</a> | <a href="companies.aspx">Companies</a> | <a href="pre-qualification.aspx">Pre-qualification</a> | <a href="about-us.aspx#abtContacts" id="mainContactLink">contact Us</a><div id="content"></div>
        </div>
        </div>
    </div>

    </form>
</body>
</html>

这是关于-us.aspx

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="about-us.aspx.vb" Inherits="about_us" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"></asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
  <div id="contMainDiv">
    <img alt="About Us" src="images/headers/about-header.png" />
    <table id="mainContTable">
      <tr >
        <td class="leftTd">
          <div id="contentBodyDiv" class="flexcroll">
            <div id="abtIntro" style="display:block;">this is some about intro</div>
            <div id="abtHistory" style="">this is some about History</div>
            <div id="abtContacts" style="display:block;">and these are contact details</div>
          </div>
        </td>
        <td class="rightTd">
          <div id="rightmenu">
            <ul class="rightmenu">
              <li><a href="#" id="introLink">Introduction</a></li>
              <li><a href="#" id="historyLink">History</a></li>
              <li><a href="#" id="visionLink">Vision and Mission</a></li>
              <li><a href="#" id="contatUsLink">Contact Us</a></li>
            </ul>
          </div>
        </td>
      </tr>
    </table>
  </div>
</asp:Content>

它不起作用..任何想法?

1 个答案:

答案 0 :(得分:5)

如果您的意思是在同一页面内加载,则可以使用JQuery的load方法。

$(document).ready(function() {
    $("#mainContactLink").click(function() {
   $('body').load("about-us.aspx");
       $(" #abtContacts").fadeIn(1000).siblings("div").fadeOut(100);
    });
});