如何使用tabindex在li元素中设置焦点 [英] How to set focus in li elements using tabindex
问题描述
我正在使用 ul
在主页上显示导航栏.我想为任何聚焦的导航栏显示不同的颜色.如何在元素 li
I'm using ul
to show the navigation bar in my homepage. I want to show a different color to any navigation bar which is focused. How can I do that on element li
这是我的代码
<div id="menubar">
<ul id="menu" >
<!-- put class="selected" in the li tag for the selected page - to highlight which page you're on -->
<li tabindex="1"><a href="#" >Home</a></li>
<li tabindex="1" ><a href="#" >Projects</a></li>
<li tabindex="1" ><a href="#" >Publications</a></li>
<li tabindex="1" ><a href="#" >News</a></li>
<li tabindex="1"><a href="#" >Members</a></li>
<li tabindex="1"><a href="#" >Contact Us</a></li>
</ul>
</div>
我尝试的样式是
background: #00C6F0;
但是由于某些未知原因,我无法这样做.请帮助
But due to some unknown reason I"m unable to do so . Please help
推荐答案
如果在菜单中切换时希望将背景颜色设置为不同,而不是将鼠标悬停在菜单上,则可以在此处使用以下示例:
If you would like to have different background colours when you tab through the menu vs simply hovering over it, you can use this example here:
重要的部分是
.navbar ul li a[tabindex="1"]:focus {
background: #00C6F0;
}
,因为它们在焦点对准时选择了各个选项卡索引.如果希望所有菜单项在制表时都具有相同的颜色,则可以删除制表索引2-7等,只需将选择器设为 .navbar ul li a [tabindex]:focus 代码>
as these select the individual tab-indexes while they are in focus. If you want all the menu items to have the same colour while tabbing though it, you can remove the tab-indexes 2-7 etc, and just have the selector as .navbar ul li a[tabindex]:focus
.navbar ul li a[tabindex="1"]:focus {
background: #00C6F0;
}
.navbar ul li a[tabindex="2"]:focus {
background: #feca57;
}
.navbar ul li a[tabindex="3"]:focus {
background: #ff6b6b;
}
.navbar ul li a[tabindex="4"]:focus {
background: #48dbfb;
}
.navbar ul li a[tabindex="5"]:focus {
background: #5f27cd;
}
.navbar ul li a[tabindex="6"]:focus {
background: #8395a7;
}
.navbar ul li a[tabindex="7"]:focus {
background: #10ac84;
}
* {
box-sizing: border-box;
}
.navbar {
text-align: center;
margin: 20px 0;
position: relative;
background: #E51573;
}
.navbar ul {
padding: 0;
}
.navbar ul li {
display: inline-block;
line-height: 30px;
font-size: 14px;
text-transform: uppercase;
padding: 0;
-webkit-transition: ease-in-out .15s;
-o-transition: ease-in-out .15s;
transition: ease-in-out .15s;
}
.navbar ul li:hover {
background: #EE2C86;
color: white;
}
.navbar ul li a {
display: inline-block;
color: white;
padding: 5px 9px;
text-decoration: none;
-webkit-transition: ease-in-out .15s;
-o-transition: ease-in-out .15s;
transition: ease-in-out .15s;
width: 100%;
font-weight: bold;
}
.navbar ul li a:hover {
background: #EE2C86;
color: white;
}
.navbar ul li:hover a {
color: white;
}
.navbar ul li a.active {
color: #FFF;
background: #71261F;
}
.navbar ul li:hover ul {
display: block;
}
.navbar ul li ul {
display: none;
position: absolute;
background: #9D9FA2;
padding: 0;
z-index: 200;
}
.navbar ul li ul li {
border: none;
padding: 0;
display: block;
}
.navbar ul li ul li:hover {
border-radius: 0;
}
.navbar ul li ul li:first-child {
border: none;
}
.navbar ul li ul li a {
margin: 5px 0;
color: white;
}
.navbar ul li ul li a:hover {
border-radius: 0;
}
.navbar ul li ul ul {
position: absolute;
left: 200px;
top: 0;
display: none;
}
.navbar ul li li:hover ul {
display: block!important;
}
<div class="navbar">
<ul>
<li><a tabindex="1" href="#">Home</a></li>
<li><a tabindex="2" href="#">Menu2</a>
<ul>
<li><a href="#">Sub-Menu 1</a></li>
<li><a href="#">Sub-Menu2</a>
</ul>
</li>
<li><a tabindex="3" href="#">Menu3</a></li>
<li><a tabindex="4" href="#">Menu4</a></li>
<li><a tabindex="5" href="#">Menu5</a></li>
<li><a tabindex="6" href="#">Menu6</a></li>
<li><a tabindex="7" href="#">Menu7</a></li>
</ul>
</div>
这篇关于如何使用tabindex在li元素中设置焦点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!