Добавьте функцию щелчка к изображению заголовка, используя javascript

Question

HTML для сайта извлекает название организации из базы данных в заголовок. Я использовал CSS, чтобы скрыть название организации, а затем отобразил lo go. Я хочу, чтобы lo go был связан с главной страницей. Источник HTML для страницы:

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

Этот CSS добавил компанию lo go:

<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, так и для диапазона, который первоначально отображал название компании. Я что-то упустил, так как ни один из них не связал гиперссылку lo go или div.header:

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

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

Как мне это сделать или есть лучший способ удалить orgName, добавить lo go через URL и сделать гиперссылку lo go? Спасибо.

Answer 1

Один из способов - обернуть весь заголовок в тег привязки с атрибутом href

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

Другой способ - обработать скрытие текста и обработать событие click с помощью 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'); 
    })
});