如何将类当前/活动添加到指向当前页面的链接?
问题描述:
我已经写了这行jQuery代码来比较当前的URL和链接URL来分配活动的类,但没有定义c和d变量的url最后一行。如何将类当前/活动添加到指向当前页面的链接?
这是怎么发生的?
var a=window.location.href;
var d=a+$("a.date sort_by_time").attr('href');
var c=a+$("a.date sort_by_some").attr('href');
console.log(c);
console.log(d);
if (a==c) {
$('.date sort_by_time').addClass('active');
}
if (a==d) {
$('.date sort_by_some').addClass('active');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="date">
<p>sorting: </p>
<a href="?sortby=some" class="sort_by_some"><i class="icon-star-empty"></i>by some</a>
<a href="?sortby=date" class="sort_by_time">by time<i class="icon-calendar"></i></a>
</span>
答
我不知道你正试图在这里实现什么。我不确定'a'变量来自哪里。你有没有把所有的代码复制到你的文章?
这是你想要的吗?如果没有,请提供更多信息。
https://jsfiddle.net/at3e1u84/
var d = $(".date > .sort_by_time").attr('href');
var c = $(".date > .sort_by_some").attr('href');
console.log(c);
console.log(d);
UPDATE:
我已比你原来的想法很大的更复杂的加入一些正则表达式。我会解释为什么:
如果链接www.example.com/?sortby=some:
a = www.example.com/?sortby=some
c = www.example.com/?sortby=some?sortby=some
d = www.example.com/?sortby=some?sortby=time
,因为它比较本身的+添加可以永远不等于C或d 。
这就是为什么我使用正则表达式来获取URL的'?...'部分并将其与href的相比较。
我希望这将是解决您的问题。
https://jsfiddle.net/at3e1u84/4/
let regex = /\?sort.*/;
let matches = (window.location.href).match(regex);
var a = matches ? matches[0] : null;
var d = $(".date > .sort_by_time").attr('href');
var c = $(".date > .sort_by_some").attr('href');
console.log(a);
console.log(c);
console.log(d);
console.log(window.location.href)
if (a == c) {
$('.date > .sort_by_time').addClass('active');
}
if (a == d) {
$('.date > .sort_by_some').addClass('active');
}
答
在这里,你去了一个解决方案
var a=window.location.href;
var d = a + $("a.sort_by_time").attr('href');
var c = a + $("a.sort_by_some").attr('href');
console.log(c);
console.log(d);
if (a==c) {
$('.date sort_by_time').addClass('active');
}
if (a==d) {
$('.date sort_by_some').addClass('active');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="date">
<p>sorting: </p>
<a href="?sortby=some" class="sort_by_some">
<i class="icon-star-empty"></i>by some
</a>
<a href="?sortby=date" class="sort_by_time">by time
<i class="icon-calendar"></i>
</a>
</span>
希望这会帮助你。
thnx为快速回复我想要与当前网址进行比较ut在控制台日志中的$ c $ d变量的结尾处得到未定义 –
(index):48 https://fiddle.jshell.net/_display/undefined (index):49 https://fiddle.jshell.net/_display/undefined –
它显示未定义在url-s的末尾。 –