1

我是 asp.net 的新手并使用 jQuery。使用母版页源并且无法从无序列表中设置不同的图像。

UL：

<div id="navMenu">
            <ul>
                <li><asp:HyperLink ID="Home" AccessKey runat="server" NavigateUrl = "~/Home.aspx">Home</asp:HyperLink></li>
                <li><asp:HyperLink ID="About" runat="server" NavigateUrl = "~/PageContent/About.aspx">About</asp:HyperLink></li>
                <li><asp:HyperLink ID="Services" runat="server" NavigateUrl = "">Services</asp:HyperLink>
                    <ul>
                        <li><asp:HyperLink ID="Website" runat="server" NavigateUrl = "~/PageContent/WebServices/Website.aspx">Website</asp:HyperLink></li>
                        <li><asp:HyperLink ID="Photography" runat="server" NavigateUrl = "~/PageContent/WebServices/Photography.aspx">Photography</asp:HyperLink></li>
                        <li><asp:HyperLink ID="MusicVideos" runat="server" NavigateUrl = "~/PageContent/WebServices/MusicVideos.aspx">Music Videos</asp:HyperLink></li>
                        <li><asp:HyperLink ID="Marketing" runat="server" NavigateUrl = "~/PageContent/WebServices/Marketing.aspx">Marketing</asp:HyperLink></li>
                        <li><asp:HyperLink ID="Events" runat="server" NavigateUrl = "~/PageContent/WebServices/Events.aspx">Events</asp:HyperLink></li>
                    </ul>
                </li>
                <li><asp:HyperLink ID="WhatsOn" runat="server" NavigateUrl = "~/PageContent/WhatsOn.aspx">What's On?</asp:HyperLink></li>
                <li><asp:HyperLink ID="Tshirt" runat="server" NavigateUrl = "~/PageContent/TShirt.aspx">T-Shirt</asp:HyperLink></li>
                <li><asp:HyperLink ID="Contact" runat="server" NavigateUrl = "~/PageContent/Contact.aspx">Contact</asp:HyperLink></li>
            </ul>
        </div>

图片命名为：HyperLink ID + “.jpg”，保存在“Images”文件夹中。

<asp:Image ID="imageMain" runat="server" ImageUrl="~/Images/event.jpg" 
            Height="187px" Width="718px" />

点击菜单栏：

$("document").ready(function () {
$('#navMenu').click(function (event) {
    var targetImage = "~/Images/" + event.target.id + ".jpg";
    var hyperLink = document.getElementById("#<%= imgMain.ClientID %>");
    $(hyperLink).find("img").attr('src', targetImage);
   });

});

图像未拉取。检查调试超链接 = null。

有什么建议吗？

渲染的html代码：

<!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>
    Envy One's Youth
</title>

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





    </head>
<body>
    <form method="post" action="Website.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEwMDUyNjYzMjgPZBYCZg9kFgICAw9kFgQCAg8PFgIeBFRleHQFKURhdGU6IDxzdHJvbmc+TW9uZGF5IDMgSnVuZSAyMDEzPC9TdHJvbmc+ZGQCNA8PFgIfAAUFMjAxMy5kZGT7ywXuhnBeBemRTRYVMXg3ae81R4WYIL6fg0J8yubNOg==" />
</div>

    <div id="main">


        <div id="dateTime">
            <span id="dateLabel">Date: <strong>Monday 3 June 2013</Strong></span><br />
            <span id="timeLabel"></span>
        </div>
        <div id="navMenu">
            <ul>
                <li><a id="Home" href="../../Home.aspx">Home</a></li>
                <li><a id="About" href="../About.aspx">About</a></li>
                <li><a id="Services">Services</a>
                    <ul>
                        <li><a id="Website" href="Website.aspx">Website</a></li>
                        <li><a id="Photography" href="Photography.aspx">Photography</a></li>
                        <li><a id="MusicVideos" href="MusicVideos.aspx">Music Videos</a></li>
                        <li><a id="Marketing" href="Marketing.aspx">Marketing</a></li>
                        <li><a id="Events" href="Events.aspx">Events</a></li>
                    </ul>
                </li>
                <li><a id="WhatsOn" href="../WhatsOn.aspx">What's On?</a></li>
                <li><a id="Tshirt" href="../TShirt.aspx">T-Shirt</a></li>
                <li><a id="Contact" href="../Contact.aspx">Contact</a></li>
            </ul>
        </div>

        <div id="companyDetials">
            <p>Envy One's Youth Company details <br /></p>


        </div>

        <div id="mainContent">
           <img id="imgMain" src="../../Images/event.jpg" style="height:187px;width:718px;" />

            <!-- Display of the content from navigation menu -->






            <!-- Services of the website  -->

<h1>Website:</h1><br />













            <!-- End of services of the website  -->









        </div>

        <hr />
        <div id="footer">
            <div id ="socialMedia">

            </div>
            Envy One's Youth | Copyright &copy; - <span id="LabelYear">2013.</span>
        </div>
    </div>
    </form>
 </body>
</html>

src="../../Images/event.jpg" 应该改为 src="../../Images/targetImage"

4

1 回答 1

0

尝试使用对象文档的就绪处理程序。{没有标签<document>}

$(document).ready(function () {
    $('#navMenu').click(function (event) {
        var targetImage = "~/Images/" + event.target.id + ".jpg";
        var hyperLink = document.getElementById("#<%= imgMain.ClientID %>");
        $(hyperLink).find("img").attr('src', targetImage);
   });
});
于 2013-06-03T09:05:41.990 回答