Question

我正在尝试一个带有onclick事件的按钮，该按钮的行为类似于另一个链接中的普通链接。

<a href="http://link1.com">
    <div>
        <h3>Some text</h3>
        <p>Some other text</p>
        <button onclick= 'window.location="http://www.google.de";'>Test</button>
    </div>
</a>

我希望能够单击整个div以转到link1，但是如果单击该按钮，它将带我到google.de。有办法吗？

Answer 1

我找到了解决方案。我只是将按钮放在div之外，为其指定了绝对位置，然后将其居中于div中。

我无法在此处实现引导程序，因此设计很混乱。

body {
  margin: 0;
  margin-top: 30px;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  font-family: Poppins;
  background-color: #f5f5f5;
  margin-left: auto;
  margin-right: auto;
}

a {
  color: black;
  text-decoration: none !important;
}

a:hover {
  color: inherit;
}

.person {
  border-bottom: 1px solid #e6e9ec;
  background-color: white;
  padding: 10px;
  line-height: 0.6;
  text-align: left;
  height: 160px;
}

.person:hover {
  transition: all ease-in-out 0.25s;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 3px rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}

.name {
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 18px;
  padding-top: 20px;
}

.name:hover {
  text-decoration: underline;
}

.sector {
  margin-bottom: 20px;
}

/* FORM */

.connect-btn {
  position: relative;
  left: calc(90% - 50px);
  top: -100px;
  margin-right: 35px;
}

.custom-btn {
  border-color: #00008b;
  color: #00008b;
}

.custom-btn:hover {
  background-color: #00008b;
  border-color: #00008b;
  color: white;
}

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<div class="container">

  <a href='www.google.de'>
    <div class='person'>
      <h4>Some text</h4>
      <p>Other text</p>
      <p>More text</p>
    </div>
  </a><a class='btn my-2 my-sm-0 custom-btn connect-btn' href='http://www.google.de'>Connect</a>

</div>

Answer 2

这是一个不好的标记。我修改了片段，为您的理解添加了背景。使用锚点标记比使用带JavaScript重定向的按钮更好，但是我将按照您构建它的方式来做。如果打算将其更改为锚点，则需要添加css以使其看起来像按钮，或者如果使用引导程序，则使用 .btn.btn-primary 。

.item {
  position: relative;
  padding-bottom:20px;
  background: blue;
}
.item a {
  display: block;
  background: red;
}
.item button {
  display:inline-block;
  position: absolute;
  bottom: 0;
}

<div class="item">
  <a href="http://link1.com">
  <div>
    <h3>Some text</h3>
    <p>Some other text</p>
  </div>
  </a>
  <button onclick= 'window.location="http://www.google.de";'>Test</button>
</div>

有没有一种方法可以在锚标记中包含按钮，该按钮的作用类似于另一个链接？

2 个答案: