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 / 时运行您想要的javascript按钮。

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

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

这很简单，一个由锚标记包围的 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>

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

7 个答案:

Javascript：