如何使整个 div 可点击（进入链接）？

Question

我对这段代码做了很多更改，但没有用，我应该遵循什么步骤？ 我想让包含图标和按钮文本的整个部分可点击。 我已经尝试过这种方法，但不确定它是否正确： onclick="location.href='http://www.example.com';"

您可以根据需要进行更正，我愿意提供任何帮助，谢谢。

 #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

添加锚标记并向其添加 href 属性。 然后添加一些样式以删除线条并更改颜色。 最后你可以在里面添加任何你想要的东西。 否则，您可以创建一个锚标记添加 href 和 id。 在 div 的 onclick 函数中调用一个函数 redirect()。 在 redirect() 函数中添加以下代码： document.getElementById("your-tag-id").click()

Answer 3

尝试将 div 包含在锚标记中。

<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

您需要创建一个事件侦听器，然后您可以使用一个函数在用户单击div / button时运行您希望的 javascript。

至于重定向，您可以使用 JS 创建一个新的<a>标签元素，然后为target 、 src添加适当的属性，最后在其上使用click()函数。

见JS小提琴

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

这很简单，一个由锚标记包围的 div 标记。

 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

如果你不想在你的代码中使用 JS，只需在你的列前添加一个标签

检查此代码

 #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

好的，现在我明白了。 使用此代码片段：

<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>