突出显示当前页面的Javascript



此处新建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;
}

看起来您想要突出显示与从url中提取的页面变量相对应的选项卡。尝试:

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

最新更新