如何用JSoup切换时间范围标签并刷新页面获取月度数据？

从你提供的HTML结构来看，时间范围标签是通过点击<li>或其内部的<a>标签来触发页面刷新和数据切换的。默认选中的Hourly标签带有selected类，而Monthly对应的标签是data-period="month"的<li>元素。下面是几种可行的实现方法：

方法一：原生JavaScript模拟点击 #

你可以直接定位到Monthly的标签元素，模拟用户点击行为，同时手动更新选中状态（如果页面的选中样式依赖selected类的话）：

// 等待DOM完全加载后执行逻辑
document.addEventListener('DOMContentLoaded', function() {
  // 定位到Monthly对应的li标签
  const monthlyTab = document.querySelector('li[data-period="month"]');
  if (monthlyTab) {
    // 移除当前选中标签的selected类
    document.querySelector('li.selected').classList.remove('selected');
    // 给Monthly标签添加选中标记
    monthlyTab.classList.add('selected');
    // 点击内部的a标签，触发页面的时间范围切换逻辑
    monthlyTab.querySelector('a').click();
  }
});

方法二：jQuery实现（如果页面引入了jQuery） #

如果页面已经加载了jQuery库，代码会更简洁直观：

$(document).ready(function() {
  // 直接触发Monthly标签的点击事件
  $('li[data-period="month"]').click();
  // 也可以直接点击内部的a标签，效果一致
  // $('li[data-period="month"] a').click();
});

等待月度数据加载完成的实用技巧 #

触发点击后，页面通常会通过AJAX请求加载新数据，你可以通过以下方式确保数据加载完成后再解析：

• 监听AJAX请求：利用浏览器的fetch或XMLHttpRequest拦截器，监听数据请求的完成事件
• DOM变化监听：使用MutationObserver监听页面数据展示区域的DOM变化，当内容更新时再执行解析逻辑
• 简易延迟方案：如果只是快速测试，可设置合理的延迟时间（比如2-3秒）后再解析：

  $('li[data-period="month"]').click();
  setTimeout(function() {
    // 在这里编写解析月度数据的代码
    console.log("月度数据已加载，开始解析");
  }, 2000);
  

需要注意的是，部分网站的事件绑定逻辑可能特殊，如果直接模拟点击无效，可以检查标签的pairid属性是否需要额外参数，但从你提供的HTML结构来看，直接点击就能触发时间范围切换逻辑。

内容的提问来源于stack exchange，提问作者EddiRae