How to take a href attribute and use it in a div when clicking on it?

问题

In javascript I want to tell post-container that when I click on it, take the href located at link and go to page X.

There are multiple post-container

My code is this:

<div class="post-container">
  <a class="link" href="X">
    <h2 class="post-title">Hello, world!</h2>
  </a>
  <div class="date-posts">...</div>
</div>

I want to be able to click outside the Hello, world! title of my post in any area of post-container and go to page X

Any idea how to do this?

回答1:

This will work.Add Event listener to the parent element (Event Delegation).You can take the href property of the child element and then use window.location.href.You might need to add preventDefault() to avoid default behaviour of a tag

If you have multiple tags with same class name.You have to use querySelectorAll .Either way if you have single elements or multiple elements with same class name use querySelctorAll.

// if you have one tag
let ele = document.querySelectorAll(".post-container")
ele.forEach(element => {
  element.addEventListener("click", function(e) {
    e.preventDefault();
    let href = element.children[0].getAttribute("href")
    window.location.href = href;

  })

})

.post-container {
  background-color: green;
}

<div class="post-container">
  <a class="link" href="X">
    <h2 class="post-title">Hello, world!</h2>
  </a>
  <div class="date-posts">...</div>
</div>

回答2:

I hope I'm interpreting your question correctly, but you can just rearrange where you're writing your a href tag. Instead, wrap your div inside of it. This will make the entire div element a link.

<a class="link" href="google.com">
    <div class="post-container">
        <h2 class="post-title">Hello, World!</h2>
        <div class="date-posts"></div>
    </div>
</a>

回答3:

Assuming you have multiple .post-containers you would need to iterate over each of them and add an event listener to handle click events. On click, find the a get its href and set the window.location (I just console log it in this demo)

(function(){
    let elems = document.querySelectorAll(".post-container");
    for (i = 0; i < elems.length; ++i) {
        let el = elems[i];
        el.addEventListener("click", function(e) {
            e.preventDefault();
            let href = el.querySelector("a").getAttribute("href");
            console.log("href",href);
            //window.location.href = href;
        })
    }
})();

<div class="post-container">
  <a class="link" href="X">
    <h2 class="post-title">Hello, world!</h2>
  </a>
  <div class="date-posts">...</div>
</div>
<div class="post-container">
  <a class="link" href="Y">
    <h2 class="post-title">Goodbye world!</h2>
  </a>
  <div class="date-posts">...</div>
</div>

回答4:

Javascript:

var elements = document.getElementsByClassName('post-container');

var loadLink = function() {

    var link = this.getElementsByTagName("a")[0].href;

    window.location.href = link;

};

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', loadLink, false);
}

Check working demo

回答5:

document.getElementsByClassName('post-container')[0].onclick = function(e){
  location.href = this.children[0].href;
}

来源：https://stackoverflow.com/questions/58308878/how-to-take-a-href-attribute-and-use-it-in-a-div-when-clicking-on-it

标签

javascript

html

href