Question

我的导航菜单有一个无序列表，但是当我希望整个“按钮”可点击时，只有文字是可点击的。我该怎么做？

HTML：

<ul>
        <li class="current_link"><a href="index.html">Home</a></li>
        <li><a href="early.html">Growing Up and School</a></li>
        <li><a href="career.html">Films</a></li>
        <li><a href="jamesbond.html">James Bond</a></li>
        <li><a href="gallery.html">Pictures</a></li>
    </ul>

Answer 1

这是你可以做到的一种方式：http://jsfiddle.net/Ymkpb/

<ul class="clickables">
    <li>item one <a href="http://www.google.com">link one</a></li>
    <li>item two <a href="http://www.yahoo.com">link two</a></li>
    <li>item three <a href="http://www.msn.com">link three</a></li>
    <li>item four <a href="http://www.bbc.co.uk">link four</a></li>
</ul>


$$('.clickables').each(function(clickable) {
    var list = clickable.getElements('li');

    list.addEvent('click', function() {
        var link = this.getElement('a');
        if(this.getFirst('a')) {
            window.location = link
        }
    });
});

Answer 2

既然你在询问CSS菜单，我想你有一个CSS。将以下代码添加到CSS文件中。使锚点填充整个菜单项。

ul li a {
    display: block;
    line-height: 30px;
    height: 30px;
}

CSS整个菜单项可点击

2 个答案: