![](/img/trans.png)
[英]make link active when page loads and force it ot remain active untill another specified button is clicked
[英]Need help editing JavaScript - Trying to make a link “active” when another link is clicked
我需要帮助来帮助编辑以下JavaScript。
<script>
$('.nav li a').on('click', function() {
$(this).parent().parent().find('.active').removeClass('active');
$(this).parent().addClass('active');
});
</script>
================================================== =================
除了现有功能之外,单击“ link1”时,我还需要使“ link2”变为“活动”。 请参阅下面的HTML。
<h1 class="brand"><a href="#link1">Brand</a></h1>
<ul class="nav">
<li class="active"><a href="link2">One</a></li>
<li><a href="link3">Two</a></li>
<li><a href="link4">Three</a></li>
</ul>
假设页面上只有一个活动元素,则可以执行以下操作。
$('.nav li a').on('click', function() {
$('.active').removeClass('active');
$(this).parent().addClass('active');
});
如果没有,那么您可以像这样使用closest
$('.nav li a').on('click', function() {
$(this).closest('.active').removeClass('active');
$(this).parent().addClass('active');
});
根据您的评论,我认为这可能有效
$('.nav li a').on('click', function() {
$('active').removeClass('active');
var link = $(this).attr('href'), // link1
number = parseInt(link.substr(-1)), // 1
newHref = link.slice(0, link.length - 1) + number++;
$(newHref).addClass('active');
});
因此,如果单击link1
则link2
将获得活动的类,然后单击link2
则link3
将获得其活动的类,依此类推。
您可以使用以下代码。 此处提供jsFiddle示例。
$('.nav li a').on('click', function (event) {
event.preventDefault(); //Add this only if you want to stop the default link action.
$(this).parent().siblings('li').removeClass('active');
$(this).parent().addClass('active');
});
//The below is to make #link2 active whenever #link1 is clicked.
$('.brand a').on('click', function () {
$('.nav li:first').addClass('active');
$('.nav li:first').siblings('li').removeClass('active');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.