使链接保持下划线，直到仅单击其他按钮
[英]Make a link stay underlined until only other button is clicked
问题描述
I have this page here that will be a list of partners by categories. 
我在这里有此页面，该页面将按类别列出合作伙伴。
https://www.stirringminds.com/partners/ https://www.stirringminds.com/partners/
If you click on the sidebar categories, the link will stay underline, but if you click any place in the page, the link will become inactive. 如果单击侧边栏类别，则链接将保持下划线，但是如果单击页面中的任何位置，则该链接将变为无效。
CSS: CSS：
button:hover {
text-decoration: underline;
color:#000;
}
button:focus {
text-decoration: underline;
color:#000;
}
button:active {
text-decoration: underline;
color:#000;
}
button:visited {
text-decoration: underline;
color:#000;
}
HTML: HTML：
<button id="showall" style="border:none;">All Deals</button>
<button id="show" style="border:none;">Business</button>
<button id="show2" style="border:none;">Design</button>
<button id="show3" style="border:none;">Development</button>
<button id="show4" style="border:none;">Marketing</button>
How can the link stay underlined unless I click other buttons in the categories? 除非单击类别中的其他按钮，否则如何使链接带有下划线？
Thanks. 谢谢。
4 个解决方案
解决方案1
1 已采纳 2017-05-31 23:11:58
Using jquery, you can assign a class on click that adds the underline. 使用jquery，您可以在点击时分配一个添加下划线的类。
var $buttons = jQuery('button'); $buttons.on('click',function() { jQuery(this).toggleClass('active').siblings('button').removeClass('active'); })
button:hover, button:focus, button:active, button:visited, .active { text-decoration: underline; color:#000; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="showall" class="active" style="border:none;">All Deals</button> <button id="show" style="border:none;">Business</button> <button id="show2" style="border:none;">Design</button> <button id="show3" style="border:none;">Development</button> <button id="show4" style="border:none;">Marketing</button>
A pure js version would be something like... 纯粹的js版本将类似于...
var buttons = document.getElementsByTagName("button"); function setActive(el) { for (var i = 0; i < buttons.length; i++) { if (buttons[i] == el) { el.classList.toggle("active"); } else { buttons[i].classList.remove('active'); } } } for (var i = 0; i < buttons.length; i++) { buttons[i].addEventListener("click", function() { setActive(this); }); }
button:hover, button:focus, button:active, button:visited, .active { text-decoration: underline; color:#000; }
<button id="showall" class="active" style="border:none;">All Deals</button> <button id="show" style="border:none;">Business</button> <button id="show2" style="border:none;">Design</button> <button id="show3" style="border:none;">Development</button> <button id="show4" style="border:none;">Marketing</button>
解决方案2
1 2017-05-31 23:12:47
Perhaps you should can add a class called "sidebarbuttons" to all of your links, and then attach the following onclick event to all buttons with that class: 也许您应该向所有链接添加一个名为“ sidebarbuttons”的类，然后将以下onclick事件附加到该类的所有按钮上：
$(".sidebarbuttons").on("click", function() {
$(".sidebarbuttons").not(this).each(function() {
$(this).css("text-decoration","none");
});
$(this).css("text-decoration","underline");
});
This will remove the underline from all elements with the class "sidebarbuttons" and then add the underline to only the clicked element. 这将从带有“ sidebarbuttons”类的所有元素中删除下划线，然后仅将下划线添加到单击的元素中。
解决方案3
1 2017-05-31 23:26:32
ONE Link active AT a time Now. 现在一次激活一个链接。 This is how you do it: 这是您的操作方式：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index950</title>
<style type="text/css">
.keepShow {
text-decoration: underline;
color: #000;
}
</style>
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function () {
$(".ap").click(function (event) {
$(".ap").removeClass("keepShow");
$(this).addClass("keepShow");
})
})
</script>
</head>
<body>
<div>
<button id="showall" class="ap" style="border:none;">All Deals</button>
<button id="show" class="ap" style="border:none;">Business</button>
<button id="show2" class="ap" style="border:none;">Design</button>
<button id="show3" class="ap" style="border:none;">Development</button>
<button id="show4" class="ap" style="border:none;">Marketing</button>
</div>
</body>
</html>
解决方案4
0 2017-05-31 23:38:58
Plain old javascript: 普通的旧javascript：
var catButtons = document.querySelectorAll(".wpb_wrapper button");
catButtons.forEach(function(){
catButtons[i].addEventListener('click', function(){
//remove all other active classes first
document.querySelectorAll(".wpb_wrapper button").forEach(function(){
this.classList.remove("active");
});
this.classList.toggle("active"); //add to current
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.