Question

此处有新的javascript用户...在此先感谢您的帮助。我在新闻网站上添加了分页功能，因此第1页上仅显示10篇文章，您必须选择2、3、4等才能查看更多文章。我拥有的代码允许我转到第2、3等页，但是由于某种原因，它没有突出显示我的活动页面。

这是我的代码：

HTML：

<table class="news-pages" id="paginator">
 <tr>
   <% for(var i = 1; i <= num_pages; i++) { %>
     <td class="news-pages-option"><%-i%></td>
   <% } %>
  </tr>
</table>

JS：

function getParameterByName(name, url) {
  if (!url) url = window.location.href;
  name = name.replace(/[\[\]]/g, "\\$&");
  var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
      results = regex.exec(url);
  if (!results) return null;
  if (!results[2]) return '';
  return decodeURIComponent(results[2].replace(/\+/g, " "));
}

const page = getParameterByName('p');
$('.news-pages-option').parent().addClass('active');

CSS：

.news-pages-option.active {
  background-color: #cccccc;
  border: none;
  padding: 3px 8px 3px 8px;
  text-decoration: underline;
}

Answer 1

您似乎想突出显示与从url提取的页面变量相对应的选项卡。试试：

const page = getParameterByName('p') - 1; // the array of tabs is zero-based so subtract one
$('.news-pages-option:eq(' + page + ')').addClass('active');

突出显示当前页面的Javascript

1 个答案: