I have two buttons that have underline animation when I click them. What I want to achieve is that one button, after being clicked, stays underlined, and, if I click the other one, the first removes the underlining and the other becomes underlined.
A problem is also that when I release the mouse, the underlining fades out. I don't know how to do it. Here is the code I have for now:
HTML:
<div id = 'hey'>
<div class = 'b' id = 'b1' href="#">Button one</div>
<div class = 'b' id = 'b2' href="#">Button Two</div>
</div>
CSS:
body,html {
font: bold 14px/1.4 'Open Sans', arial, sans-serif;
background: #000;
}
#hey {
margin: 150px auto 0;
padding: 0;
list-style: none;
display: table;
width: 600px;
text-align: center;
}
.b {
color: #fff;
text-transform: uppercase;
text-decoration: none;
letter-spacing: 0.15em;
display: inline-block;
padding: 15px 20px;
position: relative;
}
.b:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: #fff;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
.b:active:after {
width: 100%;
left: 0;
}
Best is to use jQuery:
$('#hey').find('.b').each(function() {
$(this).click(function() {
if(!$(this).hasClass('active')) {
$('#hey').find('.b').each(function() {$(this).removeClass('active');});
$(this).addClass('active');
}
else {
$(this).removeClass('active');
}
});
});
Then just use the class active
for the underlining.
Please include jquery cdn link then
Try this script
$(".b").click(function() {
if(!$(this).hasClass('active')) {
$('#hey').find('.b').each(function() {$(this).removeClass('active');});
$(this).addClass('active');
}
else {
$(this).removeClass('active');
}
});
Aldo add this css
.b.active:after {
width: 100%;
left: 0;
}
Try this using jquery:
$(document).ready(function(){ $('#hey .b').click(function(){ $('#hey .b').removeClass('active'); $(this).addClass('active'); }); });
body,html { font: bold 14px/1.4 'Open Sans', arial, sans-serif; background: #000; } #hey { margin: 150px auto 0; padding: 0; list-style: none; display: table; width: 600px; text-align: center; } #hey .b { color: #fff; text-transform: uppercase; text-decoration: none; letter-spacing: 0.15em; cursor: pointer; display: inline-block; padding: 15px 20px; position: relative; } #hey .b:after { background: none repeat scroll 0 0 transparent; bottom: 0; content: ""; display: block; height: 2px; left: 50%; position: absolute; background: #fff; transition: width 0.3s ease 0s, left 0.3s ease 0s; width: 0; } #hey .b.active:after { width: 100%; left: 0; }
<div id = 'hey'> <div class="active b" id = 'b1' href="#">Button one</div> <div class="b" id = 'b2' href="#">Button Two</div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.