Question

我已尝试在href类中添加cart-button，如下面的HTML代码：

    <div class="cart-button" href="#shopping-cart" alt="view-shopping-cart"><span>Shopping Cart (0)</span>
      <div class="cart-dropdown">
        <p class="emptycart">Your shopping cart is empty.</p>
      </div>
    </div>

正如您所看到的，我已将href插入cart-button课程，但是当我点击该按钮时，该页面不会转到href页面。

是否有可能将href变为div如上所述，或者这是错误的？

以下是上述HTML代码的CSS：

    .cart-button {
      position: relative;
      left: 700px;
      bottom: 57px;
      width: 180px;
      height:30px;
      cursor: pointer;
      background: url("images/cart-sprite.png") no-repeat 0 0;
    }

    .cart-button:hover { background: url("images/cart-sprite.png") no-repeat 0 -30px; }

    .cart-button span {
      white-space: nowrap;
      position: absolute;
      font-size: 13px;
      font-weight: bold;
      color: #373737;
      padding: 9px 10px 10px 53px;
    }

    .cart-button span:hover { color: #000; }

    .cart-dropdown {
      position: relative;
      top: 30px;
      right: 71px;
      width: 250px;
      height: 100px;
      background: #fff;
      border: 1px solid #ddd;
      display: none;
      opacity: 0;
    }

    .cart-button:hover .cart-dropdown {
      display: block;
      opacity: 1;
    }

    .emptycart {
      position: relative;
      font-size: 11px;
      font-weight: bold;
      padding-top: 8px;
      padding-bottom: 8px;
      color: #fff;
      background: #202020;
      text-align: center;
    }

Answer 1

使用<a>标记。您无法将href属性添加到任意元素以使其可点击。 href标记不是<a>可点击的<a>，它是<a>标记。

您可以使用JavaScript实现类似的功能，但您不应该这样做。使用语义上代表可点击元素的标记 - <button>或{{1}}。

Answer 2

尝试

  <a href="https://www.google.co.in/"><div class="cart-button"  alt="view-shopping-cart"></div></a>

DEMO

Answer 3

在html5中，您可以在<a>标记中包含块元素。

http://html5doctor.com/block-level-links-in-html-5/

因此...

<a href="#"><div>...</div></a>

Answer 4

如果不使用锚标记，您无法做到这一点。

但是，您可以向div添加onClick事件以触发您想要的任何事件。但是，我个人更喜欢前者。

Answer 5

如果你想要你也可以使用JQuery，那么你的代码看起来会像这样：

$(function () {
     $('.cart-button').click(function() {
          //GO SOMEWHERE or DO SOMETHING HERE
     });
});

不要忘记在页面中链接JQuery库。

快乐编码......

我可以点击div类吗？

5 个答案: