javascript - 使用javascript向标题图像添加点击功能

Question

站点的 HTML 将组织名称从数据库提取到 header 中。我使用 CSS 隐藏组织名称，然后显示 Logo 。我希望将 Logo 链接回主页。页面的源 HTML:

<div class="header">
    <div class="container">
        <h1>
            <span id="ctl05_orgName">Our Company</span></h1>
    </div>
</div>

此 CSS 添加了公司 Logo :

<style>
#ctl05_orgName {
display: none;
}

.header {
background-color: #4e505d;
border: 6px solid #4e505d;
background-image: url('https://www.logoimage.png');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
</style>

我发现可以使 div 可点击，并尝试添加 javascript 来为 div 和最初显示公司名称的 span 执行此操作。我遗漏了一些东西，因为它们都没有超链接 Logo 或 div.header:

$("div.header").click(function() {window.location = https://.../;});

$("span[id$=orgName").click(function() {window.location = https://.../;});

我该如何执行此操作，或者是否有更好的方法来删除 orgName、通过 url 添加 Logo 并使 Logo 超链接？谢谢。

Answer 1

一种方法是将整个 header 内容包装到带有 href 属性的 anchor 标记

<a href="url of the site">
<div class="header">
    <div class="container">
        <h1>
            <span id="ctl05_orgName">Our Company</span></h1>
    </div>
</div>
</a>

另一种方法是处理文本的隐藏并通过 JQuery 处理点击事件

$(document).ready( function() {

   // wait for page to load
    ///hide the header
    $("#ctl05_orgName").hide()
    //header click handler
    $("div.header").click( function (){ 
     window.open('http://www.google.com', '_blank'); 
    })
});