使列表项可点击（HTML/CSS）

Question

使列表项可点击（HTML/CSS）

24

我想让我的网站上的每个列表项都可以被点击，但我不确定最好的方法是什么。请帮助我。

这是相关的HTML代码：

<ul>
    <li>Backpack <a href="#" title="Buy on Amazon" target="_blank"><img src="img/basket.png" height="16" width="16" alt="Buy" class="buy" onClick="pageTracker._trackEvent('Amazon', 'School Supplies', 'Backpack');"/></a></li>
    <!-- More List Items -->
</ul>

这里是相关的 CSS：

.content ul li {
    display:block;
    list-style:none;
    padding:5px 10px 5px 15px;
}

.content li li {
    // This is for when there are sub-categories.
    border-bottom: none;
    border-top: 1px solid #f8d9d0;
    margin: 3px -10px -3px -15px;
    padding: 5px 0px 5px 30px;
}

.buy {
    float: right;
    margin-top: -2px;
}

// The next ones all deal with the shopping cart icon that appears only on hovers.

.listblock ul li img { 
    visibility: hidden;
}

.listblock ul li:hover img { 
    visibility: visible;
}

.listblock ul li ul li img { 
    visibility: hidden !important;
    margin-right: 10px;
}

.listblock ul li ul li:hover img { 
    visibility: visible !important;
    margin-right: 10px;
}

我该如何使整个列表项可点击并仍然使购物车图标和Google Analytics事件跟踪正常工作？有没有一些jQuery技巧可以使用？

我尝试使用display:block来处理Amazon链接，但这似乎会影响图像的位置。

非常感谢！

- user316602

使用这个jQuery代码片段：https://dev59.com/VHNA5IYBdhLWcg3wBpBm#16847686 - Ignacio Pascual

8个回答

21

元素支持 onclick 事件。

<ul>
<li onclick="location.href = 'https://dev59.com/b3A75IYBdhLWcg3wFEwI">Make A List Item Clickable</li>
</ul>

- Alan

1

MDN不鼓励在HTML中使用事件处理程序（例如onclick=）。这种方法可能会导致代码难以维护。https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes#event_handler_attributes - Merchako

14

关键是要给锚链接设置"display"属性为"block"和"宽度"属性为100％。

使列表项可点击（示例）：

HTML：

<ul>
    <li><a href="">link1</a></li>
    <li><a href="">link2</a></li>
    <li><a href="">link3</a></li>
</ul>

CSS：

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul li a {
  display: block;
  width: 100%;
  text-decoration: none;
  padding: 5px;
}
ul li a:hover {
  background-color: #ccc;
}

- joefly

这对我有帮助，谢谢！ - undefined

9

这里是一个可用的解决方案 - https://codepen.io/dragoeco/pen/YMJYqW (编辑：链接失效 http://jsfiddle.net/STTaf/)

我使用了简单的jQuery：

$(function() {
    $('li').css('cursor', 'pointer')

    .click(function() {
        window.location = $('a', this).attr('href');
        return false;
    });
});

- webtech

1

对我来说是完美的解决方案，谢谢。演示链接似乎失效了，所以我做了这个 CodePen：https://codepen.io/dragoeco/pen/YMJYqW - dragoweb

5

仅限HTML和CSS。

#leftsideMenu ul li {
  border-bottom: 1px dashed lightgray;
  background-color: cadetblue;
}

#leftsideMenu ul li a {
  padding: 8px 20px 8px 20px;
  color: white;
  display: block;
}

#leftsideMenu ul li a:hover {
  background-color: lightgreen;
  transition: 0.5s;
  padding-left: 30px;
  padding-right: 10px;
}

<div id="leftsideMenu">
  <ul style="list-style-type:none">
    <li><a href="#">India</a></li>
    <li><a href="#">USA</a></li>
    <li><a href="#">Russia</a></li>
    <li><a href="#">China</a></li>
    <li><a href="#">Afganistan</a></li>
    <li><a href="#">Landon</a></li>
    <li><a href="#">Scotland</a></li>
    <li><a href="#">Ireland</a></li>
  </ul>
</div>

- PK-1825

非常糟糕的回答，我已经改进了它。如果你纠正你的“回答”，我会取消-1。 - Darwin Ameli

我已经通过编辑进行了更正。您可以自行纠正，我会撤销我的 -1。 - Darwin Ameli

4

放弃使用 <a href="...">，将 onclick（全部小写）处理程序放在 <li> 标签本身上。

- Paul Schreiber

2

把所有内容放在链接里面怎么样？

<li><a href="#" onClick="..." ... >Backpack <img ... /></a></li>

似乎是尝试的最自然的事情。

- Nikita Rybak

2

我知道回复有点晚了，但也许对其他人有用。
您可以将所有的 <li> 元素内容放入 <a> 标签中，并添加以下 CSS：

li a { 
    display: block; 
    /* and you can use padding for additional space if needs, as a clickable area / or other styling */ 
    padding: 5px 20px; 
}

- Istvan Nonn

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Yi Jiang · Accepted Answer

我认为你可以使用以下HTML和CSS组合代替：

<li>
  <a href="#">Backback</a>
</li>

然后使用CSS背景在悬停时显示篮子：

.listblock ul li a {
    padding: 5px 30px 5px 10px;
    display: block;
}

.listblock ul li a:hover {
    background: transparent url('../img/basket.png') no-repeat 3px 170px;
}

简单易懂！