jquery点击切换接口渲染的li加背景颜色

您可以使用以下代码实现点击切换li的背景颜色：

$(document).ready(function(){
  $('li').click(function(){
    $('li').removeClass('active');
    $(this).addClass('active');
  });
});

在上述代码中，我们首先为所有的li元素绑定了一个单击事件。然后，我们使用 `removeClass()` 方法移除所有li元素上的 `active` 类。最后，我们使用 `addClass()` 方法为被单击的li元素添加 `active` 类，以改变其背景颜色。

您可以根据自己的需要自定义 `active` 类的样式。

相关问题

jquery，ajax写一个tab切换的简单分页

可以使用jQuery和Ajax来实现一个简单的分页tab切换效果。以下是一个示例代码：

HTML部分：

<div id="tabs">
  <ul class="tab-nav">
    <li><a href="#" data-page="1">Tab 1</a></li>
    <li><a href="#" data-page="2">Tab 2</a></li>
    <li><a href="#" data-page="3">Tab 3</a></li>
  </ul>
  <div class="tab-content"></div>
</div>

JavaScript部分：

$(document).ready(function() {
  // 默认显示第一个tab
  loadTab(1);

  // tab切换事件
  $('.tab-nav a').click(function(e) {
    e.preventDefault();
    var page = $(this).data('page');
    loadTab(page);
  });

  function loadTab(page) {
    $.ajax({
      url: 'your_api_endpoint', // 替换为你的API接口地址
      type: 'GET',
      data: { page: page },
      success: function(response) {
        // 渲染tab内容
        $('.tab-content').html(response);
      },
      error: function() {
        alert('加载失败');
      }
    });
  }
});

在上面的代码中，我们使用了一个`ul`列表来显示tab导航，每个`li`里都有一个带有`data-page`属性的链接，用于表示对应的页面编号。`.tab-content`是用来显示每个tab内容的容器。

在JavaScript部分，我们首先调用`loadTab(1)`来加载默认的第一个tab，然后给每个tab链接绑定了一个点击事件，点击时调用`loadTab`函数来加载相应的tab内容。

在`loadTab`函数中，我们使用了jQuery的`$.ajax`方法来发送一个GET请求到指定的API接口，并通过传递的`page`参数来获取对应页面的内容。在成功响应时，我们将获取到的内容渲染到`.tab-content`容器中。

请注意，你需要将`url`替换为你自己的API接口地址，并确保你的API能够根据传递的`page`参数返回对应页面的内容。

希望这个示例能帮助到你，如果有任何疑问，请随时提问。