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');

jquery无法改变ul li风格

1 个答案: