Как установить фокус в элементах li с помощью tabindex

Question

Я использую ul, чтобы показать панель навигации на моей домашней странице.Я хочу показать другой цвет на любой панели навигации, которая сфокусирована.Как я могу сделать это на элементе 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;

Но по какой-то неизвестной причине я не могу этого сделать. Пожалуйста, помогите

Answer 1

Если вы хотите иметь разные цвета фона при переходе по меню по сравнению с простым наведением на него, вы можете использовать этот пример здесь:

Важными частями являются

.navbar ul li a[tabindex="1"]:focus {
  background: #00C6F0;
}

так как они выбирают отдельные таб-индексы, пока они находятся в фокусе.Если вы хотите, чтобы все пункты меню имели одинаковый цвет во время вкладок, вы можете удалить индексы вкладок 2-7 и т. Д., И просто выберите селектор как .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>

Answer 2

Это может помочь вам

li a:focus {
  background: #00C6F0;
}

Answer 3

Вы слишком усложняете свой код.В HTML5 есть тег <nav>.

Вам не нужны все эти "обертки", и tabindex тоже не нужен.

a {display:block}
a:focus {background: #00C6F0}

<nav>
  <a href="#">Home</a>
  <a href="#">Projects</a>
  <a href="#">Publications</a>
  <a href="#">News</a>
  <a href="#">Members</a>
  <a href="#">Contact Us</a>
</nav>

Answer 4

Вы можете попробовать использовать селектор CSS :focus.

ul#menu li:focus{
  background: #00C6F0;
}