[英]change active menu-items font on click
So, i've got this menu which is linked to some dynamically displayed content, I've been trying to write some js-code that changes the font of the currently active item. 因此,我已经将此菜单链接到一些动态显示的内容,我一直在尝试编写一些js代码来更改当前活动项目的字体。 My problem is now that it never deselects that item if it isn't active anymore.
我的问题是,如果它不再处于活动状态,它永远不会取消选择该项目。
jsfiddle: jsfiddle:
https://jsfiddle.net/z4uhL5wv/2/ https://jsfiddle.net/z4uhL5wv/2/
jquery: jQuery的:
$(document).ready(function() {
$("a.menu2").click(function(e) {
$('.ShowClickedContent').html($($(this).attr('href')).html()); //dynamic content
var clicks = 0;
if(clicks % 2 == 0){
$(this).css('font-family','gillsans');
}else{
$(this).css('font-family','gillsanslight');
}
++clicks;
});
});
Any help would be greatful. 任何帮助将是巨大的。 Note: i need to use that exact showClickedContent query in the final solution due to problems arising with margin otherwise.
注意:由于余量引起的问题,我需要在最终解决方案中使用确切的showClickedContent查询。
https://jsfiddle.net/ynrnt6xL/ https://jsfiddle.net/ynrnt6xL/
$(document).ready(function() {
const buttons = $('.menu2');
const clear = function() {
$.each( buttons, function(index, btn) {
$(btn).removeClass('selected');
})
}
$.each( buttons, function(index, btn) {
$(btn).click( function(e) {
clear();
$(this).addClass('selected');
});
});
});
You can do it with CSS! 您可以使用CSS做到这一点! I didn't mess with fonts, but I did it with font-size as an example:
我没有弄乱字体,但是我以font-size为例:
a:active, a:focus {font-size:15px;}
Just replace the font-size with font-family and whatever... 只需将font-size替换为font-family等。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.