logo标签列表

如何在HTML中将多个onClick事件链接到一个元素？它们能改变href吗？

htmlonclickmouseeventhrefreplace
7
我正在为一家实习公司建立网页，但似乎无法解决以下问题。下面的代码只是一个简化的模板，以便我不会泄露有关该公司的任何信息（所有样式属性都在单独的文档中，因此代码中的所有内容都没问题）。
我的问题是如何使多个 onClick 事件起作用。对于这个问题，在注释标签中使用 onClick 是否可行？我希望根据所点击的动物图片更改“Further Instruction”文本的 href 路径。
另外，我不能使用任何 JavaScript，请不要建议使用任何 JavaScript。你有什么想法吗？
<div id="container">
    <div class="mainPicture">
        <img alt="" id="awesome" name="Awesome2" src="awesome.png" />
    </div>
    <div id="gallery">
        <ul class="popOut">
            <li>
                <a href="DogText.html" target="AnimalInfo" onClick="document.Awesome2.src='dog.jpg'"> <!--onClick="document.furtherInstructions.href='DogText.html'">--> 
                    <img src="dog.jpg" alt="dog"><img src="dog.jpg" alt="dog" class="preview"> 
                </a>
            </li>   
            <li>
                <a href="CatText.html" target="AnimalInfo" onClick="document.Awesome2.src='cat.jpg'"> <!--onClick="document.furtherInstructions.href='CatText.html'">-->
                    <img src="cat.jpg" alt="cat"><img src="cat.jpg" alt="cat" class="preview"> 
                </a>
            </li>   
            <li>
                <a href="ParrotText.html" target="AnimalInfo" onClick="document.Awesome2.src='parrot.jpg'"> <!--onClick="document.furtherInstructions.href='ParrotText.html'">-->
                    <img src="parrot.jpg" alt="parrot"><img src="parrot.jpg" alt="parrot" class="preview"> 
                </a>
            </li>       
            <li>
                <a href="LizardText.html" target="AnimalInfo" onClick="document.Awesome2.src='lizard.jpg'"> <!--onClick="document.furtherInstructions.href='LizardText.html'">--> 
                    <img src="lizard.jpg" alt="lizard"><img src="lizard.jpg" alt="lizard" class="preview"> 
                </a>
            </li>       
            <li>
                <a href="HorseText.html" target="AnimalInfo" onClick="document.Awesome2.src='horse.jpg'"> <!--onClick="document.furtherInstructions.href='HorseText.html'">-->
                    <img src="horse.jpg" alt="horse"><img src="horse.jpg" alt="horse" class="preview"> 
                </a>
            </li>       
            <li>
                <a href="ChickenText.html" target="AnimalInfo" onClick="document.Awesome2.src='chicken.jpg'"> <!--onClick="document.furtherInstructions.href='ChickenText.html'">--> 
                    <img src="chicken.jpg" alt="chicken"><img src="chicken.jpg" alt="chicken" class="preview"> 
                </a>
            </li>   
            <li>
                <a href="DefaultText.html" target="AnimalInfo" class="center" onClick="document.Awesome2.src='awesome.png'"> <!--onClick="document.furtherInstructions.href='DefaultText.html'">-->
                    <p>Default Image</p>
            </a>
            </li>
        </ul>
        <div id="rightcol">
            <iframe src="DefaultText.html" title="Information About Animals" name="AnimalInfo" class="fixThisHeight">
            </iframe>
        </div>
        <div id="externalInstructions">
            <a href="DefaultText.html" name="furtherInstructions">
                <p>Further Instructions</p>
            </a>
        </div>
    </div>
</div>
4
很抱歉要告诉你，onclick属性就是JavaScript。没有它，网页就无法实现任何动态行为。 - Mark Reed
1
也许不要使用 onclick，将您的点击处理移至外部脚本并在那里分配多个函数。另外：您不能使用 JavaScript 来“使用 JavaScript”？这是什么意思..? - David Thomas
2
“我不能使用任何JavaScript，所以请不要建议使用任何JavaScript” - 但是您已经在使用JavaScript了？！ - Widor
抱歉，我没有表达清楚。我们只能使用内联JavaScript。由于我们正在构建网站的内容管理系统，我们不能有<script></script>元素或导入外部脚本文件。 - Henry Edward Quinn IV
1个回答
14

只需用半角分号分隔您的命令：

onClick="document.Awesome2.src='chicken.jpg'; document.furtherInstructions.href='ChickenText.html';">
刚刚尝试了以下代码：<a href="DogText.html" target="AnimalInfo" onClick="document.Awesome2.src='dog.jpg'; document.furtherInstructions.href='DogText.html'"> <img src="dog.jpg" alt="dog"><img src="dog.jpg" alt="dog" class="preview"> </a> 但是没有起作用，总是打开 DefaultText.html。请指导。 - Henry Edward Quinn IV
如果我有一些第三方代码，它自行定义了 onClick，而我无法修改它（但仍希望在自己的代码中进行额外的点击处理），该怎么办？ - om-nom-nom
将 document.furtherInstructions.href 更改为 document.getElementById('furtherInstructions').href，并将 <a ... name="furtherInstructions"> 更改为 <a ... id="furtherInstructions">。同时将所有的 <a href=... target="AnimalInfo" 更改为 <a href="javascript:void(0);"（去掉 target=）。 - Larphoid
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接