Question

我是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”

Answer 1

尝试使用对象文档的ready处理程序。 {没有标记<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);
   });
});

如何从无序列表中提取图像？

1 个答案: