保存面包屑项目上的颜色点击 [英] Preserving color on breadcrumb item click
问题描述
我在此 JSFIDDLE
中有一个面包屑的工作演示
以下是代码
:HTML
< div id =crumbs>
< ul>
< li>< a href =#1>一个< / a>< / li&
< li>< a href =#2>两个< / a>< / li&
< / ul>
< / div>
CSS
#crumbs ul li {
display:inline;
}
#crumbs ul li a {
display:block;
float:left;
height:50px;
background:#3498db;
text-align:center;
padding:30px 40px 0;
position:relative;
margin:0 10px 0 0;
font-size:20px;
text-decoration:none;
color:#fff;
padding:30px 40px 0 80px;
}
#crumbs ul li a:after {
content:;
border-top:40px solid rgba(0,0,0,0);
border-bottom:40px solid rgba(0,0,0,0);
border-left:40px solid#3498DB;
position:absolute;
right:-40px;
top:0;
z-index:1;
}
#crumbs ul li a:before {
content:;
border-top:40px solid rgba(0,0,0,0);
border-bottom:40px solid rgba(0,0,0,0);
border-left:40px solid #fff;
position:absolute;
left:0;
top:0;
}
#crumbs ul li a:hover {
background:#fa5ba5;
}
#crumbs ul li a:hover:after {
border-left-color:#fa5ba5;
}
Css有鼠标悬停的粉红色,但我真正想做的是在点击面包屑上的任何项目时保留该颜色即:在点击之后应该保留粉红色颜色,其可以作为用户的信号,在面包屑中的哪个选项卡当前是活动的。
我尝试过在css中使用:active,但它不会保留点击后面包屑的颜色。
任何帮助?
您必须使用:visited
这样的效果会很好:
#crumbs ul li a:visited {
background-color:#fa5ba5;
}
#crumbs ul li a:visited:after {
border-left-color:#fa5ba5;
}
和JS Fiddle:演示
EDIT(完整JS方法) >
您可以在 JSFiddle这里找到完整的JS演示文稿。
在 onclick
事件中,有一个循环从上一个活动链接中删除 .onclick
p>
提供的代码必须改进,它只是为了显示它可以工作。
我强烈建议您使用像jQuery一样,因为DOM操作在原生的JS代码中是很无聊的。
为了显示区别,使用jQuery你必须这样做:
HTML代码:
< div id =crumbs>
< ul>
< li>< a class =linkhref =#1>一个< / a>< / li>
< li>< a class =linkhref =#2>两个< / a>< / li&
< / ul>
< / div>
JS代码:
$('。link')。on('click',function(){
$('。onclick')。removeClass('onclick'); link
$(this).addClass('onclick'); //将类添加到新的活动链接
});
I have a working demo of breadcrumbs here in this JSFIDDLE
Below is the code
HTML
<div id="crumbs">
<ul>
<li><a href="#1">One</a></li>
<li><a href="#2">Two</a></li>
</ul>
</div>
CSS
#crumbs ul li {
display: inline;
}
#crumbs ul li a {
display: block;
float: left;
height: 50px;
background: #3498db;
text-align: center;
padding: 30px 40px 0;
position: relative;
margin: 0 10px 0 0;
font-size: 20px;
text-decoration: none;
color: #fff;
padding: 30px 40px 0 80px;
}
#crumbs ul li a:after {
content: "";
border-top: 40px solid rgba(0,0,0,0);
border-bottom: 40px solid rgba(0,0,0,0);
border-left: 40px solid #3498DB;
position: absolute;
right: -40px;
top: 0;
z-index: 1;
}
#crumbs ul li a:before {
content: "";
border-top: 40px solid rgba(0,0,0,0);
border-bottom: 40px solid rgba(0,0,0,0);
border-left: 40px solid #fff;
position: absolute;
left: 0;
top: 0;
}
#crumbs ul li a:hover {
background: #fa5ba5;
}
#crumbs ul li a:hover:after {
border-left-color: #fa5ba5;
}
Css has pink color for mouse hover but what i actually want to do is to preserve that color once any item on breadcrumbs is clicked ie: the pink color should remain after a click which can act as a signal to user as of which tab in breadcrumb is currently active.
I have tried using :active in css but it does not preserve the color on breadcrumbs after click.
Any help ?
You have to use :visited
selector. Something like this will work well :
#crumbs ul li a:visited {
background-color: #fa5ba5;
}
#crumbs ul li a:visited:after {
border-left-color: #fa5ba5;
}
And the JS Fiddle : Demo
EDIT (Full JS method):
You can find the full JS demo in the JSFiddle here.
In onclick
event, there is a loop which remove class .onclick
from previous active link.
Code provided must be improved, it's just to show you it can work.
I highly recommend you to use a library like jQuery, because DOM manipulation in native JS code is very boring.
To show you the difference, with jQuery you would have to do this :
HTML Code :
<div id="crumbs">
<ul>
<li><a class="link" href="#1">One</a></li>
<li><a class="link" href="#2">Two</a></li>
</ul>
</div>
JS Code :
$('.link').on('click', function() {
$('.onclick').removeClass('onclick'); // Remove class from previous active link
$(this).addClass('onclick'); // Add class to new active link
});
这篇关于保存面包屑项目上的颜色点击的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!