How to make entire div clickable(into a link)?

Question

I made many changes on this code but it didn't work, what step should I follow? I want to make whole section that include icon and button's text clickable. I have tried this method already but not sure is it true or not: onclick="location.href='http://www.example.com';"

You can make corrections as you want, I'm open to any help, thank you.

 #ana_div { height: 400px; width: 960px; margin-right: auto; margin-left: auto; background-color: #f7f7f7; } .ikon { margin-left: 30px; margin-top: 15px; position: absolute; } .div { display: inline-block; float: left; height: 80px; width: 300px; margin: 10px; } .btn { border: none; color: black; height: 80px; width: 300px; font-size: 19px; cursor: pointer; background-color: #fff; } .btn:hover { background-color: #4d4d4d; }

 <div id="ana_div"> <div class="div" id="div"> <div class="ikon"> <img src="icon.png"> </div> <button class="btn"> button1 </button> </div> <div class="div" id="div"> <div class="ikon"> <img src="icon.png"> </div> <button class="btn"> button2 </button> </div> </div>

Answer 1

你可以像这样写按钮点击：

<button onclick=" window.open('http://www.google.com', '_blank'); return false;">Continue</button>

Answer 2

Add an anchor tag and add the href attribute to it. Then add some style to remove the line and change the color. finally you can add anything you want inside it. Otherwise you can create a anchor tag add the href and id. inside the onclick function of your div call a function redirect(). Inside the redirect() function add this code: document.getElementById("your-tag-id").click()

Answer 3

Try enclosing div into anchor tag.

<a href= "http://www.example.com">
<div id="ana_div">

  <div class="div" id="div">
    <div class="ikon">
      <img src="icon.png">
    </div>
    <button class="btn"> button1
            </button>
  </div>

  <div class="div" id="div">
    <div class="ikon">
      <img src="icon.png">
    </div>
    <button class="btn"> button2
            </button>
  </div>

</div>
</a>

Answer 4

You need to create an event listener, then you can use a function to run the javascript you wish when the user clicks the div / button .

As for your redirect, you can create a new <a> tag element using JS, then add the appropriate attributes for target , src and lastly, use the click() function on it.

See JS Fiddle

Javascript:

let btn = document.querySelectorAll('.btn')

function redirectHeader(){
  let url = 'https://google.com'
  const a = document.createElement('a')
  a.target = '_blank'
  a.href = url
  a.click()
}

btn.forEach(button => {  
  button.addEventListener('click', redirectHeader)
})

Answer 5

This is as simple as it gets, a div tag enclosed by an anchor tag.

 a { text-decoration: none; } .big-div { height: 100px; width: 200px; background-color: red; }

 <a href="https://www.facebook.com/"> <div class="big-div"> <p>Click anywhere</p> </div> </a>

Answer 6

if you don't want to use JS in your code, just add a tag before your columns

check this code

 #ana_div { height: 400px; width: 960px; margin-right: auto; margin-left: auto; background-color: #f7f7f7; } .ikon { margin-left: 30px; margin-top: 15px; position: absolute; } .div { display: inline-block; float: left; height: 80px; width: 300px; margin: 10px; } .btn { border: none; color: black; height: 80px; width: 300px; font-size: 19px; cursor: pointer; background-color: #fff; } .btn:hover { background-color: #4d4d4d; }

 <div id="ana_div"> <a href="https://google.com"> <div class="div" id="div"> <div class="ikon"> <img src="icon.png"> </div> <button class="btn"> button1</button> </div> </a> <a href="https://microsoft.com"> <div class="div" id="div"> <div class="ikon"> <img src="icon.png"> </div> <button class="btn"> button2</button> </div> </a> </div>

Answer 7

OK now I understood. Use this code snippet:

<div id="ana_div">
  <a href="https://example.com">
  <div class="div" id="div">
    <div class="ikon">
      <img src="icon.png">
    </div>
    <button class="btn"> button1
            </button>
  </div>
  </a>
  
  <a href="https://example.com">
  <div class="div" id="div">
    <div class="ikon">
      <img src="icon.png">
    </div>
    <button class="btn"> button2
            </button>
  </div>
  </a>

</div>