jquery 无法更改 ul li 样式

Question

$(document).ready(function(){
    $(".menu").on('click', 'li', function () {
  $(this).css('background-color', '#000000');
});
});
</script>

<ul class="menu">
  <li onclick="window.location.href='start.php'">Start</li>
  <li onclick="window.location.href='event.php'">event</li>
  <li onclick="window.location.href='event_list.php'">event list</li>
  <li onclick="window.location.href='black_list.php'">black list</li>
  <li onclick="window.location.href='logout.php'">logout</li>
</ul>

我正在尝试为单个点击的 li 元素更改样式。不知道为什么这行不通。有什么想法吗？

Answer 1

正如 j08691 所指出的，内联 javascript 并不是最好的主意。试试这个:

javascript/jQuery:

$(document).ready(function(){
    $(".menu").on('click', 'li', function () {
        $(this).css('background-color', '#000000');
        var loc = this.id + '.php';  //or $(this).attr('id') + '.php'; (but slower)
        window.location.href = loc;
    });
});

HTML:

<ul class="menu">
  <li id="start">Start</li>
  <li id="event">event</li>
  <li id="event_list">event list</li>
  <li id='black_list'>black list</li>
  <li id='logout'>logout</li>
</ul>

另请注意，如果页面被重定向，则 CSS 更改将不可见。您可能希望为新页面打开一个新选项卡，如下所示:

window.open(loc, '_blank');