如何通过点击<li>来激活HTML链接?

84

我有以下的标记:

<ul id="menu">              
    <li><a href="#">Something1</a></li>
    <li><a href="#">Something2</a></li>
    <li><a href="#">Something3</a></li>
    <li><a href="#">Something4</a></li>
</ul>
  • 标签有一个小图像在其左边,而它自己却显得有点过大, 我必须实际点击标签才能激活链接。 如何让
  • 标签的点击也能激活链接呢?
  • ul#menu li
    {
        display:block;
        list-style: none;
        background: #e8eef4 url(images/arrow.png) 2% 50% no-repeat;
        border: 1px solid #b2b2b2;
        padding: 0;
        margin-top: 5px;
    }
    
    ul#menu li a
    {
    
        font-weight: bold;
        text-decoration: none;
        line-height: 2.8em;
        padding-right:.5em;
        color: #696969;
    }
    
    17个回答

    1

    尝试:

    ul#menu li a {
        color:#696969;
        display:block;
        font-weight:bold;
        line-height:2.8;
        text-decoration:none;
        width:100%;
    }
    <ul id="menu">              
        <li><a href="#">Something1</a></li>
        <li><a href="#">Something2</a></li>
        <li><a href="#">Something3</a></li>
        <li><a href="#">Something4</a></li>
    </ul>


    0

    0
    你可以在LI标签内尝试使用“onclick”事件,并像JavaScript中一样更改“location.href”。
    你也可以尝试将li标签放置在a标签内,但这可能不是有效的HTML。

    根据我的经验,通过Javascript伪造链接几乎总是导致用户体验不佳。 - Chuck
    这只是他要考虑的一个选项,毕竟这是他的网站。他可以保留正常的<a>链接,即使Javascript被关闭,它也会像往常一样工作(只是如果单击li则不会)。 - Marineio

    0

    Ignacio Pascual提供了这段代码,工作得非常好。我想用平滑滚动来增强它。

    $(document).ready(function(){
        $("li > a").each(function(index, value) {
            var link = $(this).attr("href");
            $(this).parent().bind("click", function() {
                location.href = link;
            });
        });
    }); 

    我尝试添加平滑滚动,通过使用这段代码的一部分,无论是分开使用还是插入它:

    $(document).ready(function(){
      // Add smooth scrolling to all links
      $("a").on('click', function(event) {
    
        // Make sure this.hash has a value before overriding default behavior
        if (this.hash !== "") {
          // Prevent default anchor click behavior
          event.preventDefault();
    
          // Store hash
          var hash = this.hash;
    
          // Using jQuery's animate() method to add smooth page scroll
          // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
          $('html, body').animate({
            scrollTop: $(hash).offset().top
          }, 800, function(){
    
            // Add hash (#) to URL when done scrolling (default click behavior)
            window.location.hash = hash;
          });
        } // End if
      });
    });

    但是我从来没有想到过这一点 :(
    我觉得有一个技巧,因为平滑滚动事件在一个元素上起作用,并且通过对li元素的黑客操作使其可链接,它实际上并不是一个a元素。

    -1
    如何使HTML链接通过单击
  • 激活?
    只需将您的链接变得与li一样大:只需移动指令即可。
    display: block;
    

    从li到a,然后你就完成了。

    也就是说:

    #menu li
    {
        /* no more display:block; on list item */
    
        list-style: none;
        background: #e8eef4 url(arrow.gif) 2% 50% no-repeat;
        border: 1px solid #b2b2b2;
        padding: 0;
        margin-top: 5px;
    }
    
    #menu li a
    {
        display:block; /* moved to link */
        font-weight: bold;
        text-decoration: none;
        line-height: 2.8em;
        padding-right:.5em;
        color: #696969;
    }
    

    顺便提一下:您可以从两个选择器中删除“ul”:#menu已足够表示,除非您需要赋予这两个规则权重以覆盖其他指令。


  • 1
    这对我不起作用。当我将<a>链接的显示更改为“block”时,它会自动换行到与项目符号不同的行。 - cartbeforehorse
    让我澄清一下这个回答... 我上面解释的行为在Firefox和Opera中发生,但在Chrome中不会。在Chrome中它运行良好。 - cartbeforehorse
    如果你在li和a上都保持display:block会怎样呢?否则,请在单独的问题中发布您的问题。 - FelipeAls

    -2
    使用jQuery,这样您就不必在<li>元素上编写内联JavaScript:
    $(document).ready(function(){
        $("li > a").each(function(index, value) {
            var link = $(this).attr("href");
            $(this).parent().bind("click", function() {
                location.href = link;
            });
        });
    }); 
    

    -2
    我找到了一个简单的解决方案:将标签“li”放在标签“a”的内部。
    <a href="#"><li>Something1</li></a>
    

    3
    这不是有效的。唯一可以作为<ul>子元素的是<li><a>必须在<li>内部。http://w3c.github.io/html-reference/ul.html - Daniel Sixl
    合法性和功能之间不一定有联系。 - Daniel Sixl

    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文,
    原文链接