Как изменить имя класса элемента «B» на элементе «A» Focus - PullRequest
Новая
       6

Как изменить имя класса элемента «B» на элементе «A» Focus

1 голос
/ 17 апреля 2011

Я создаю доступный сайт для воспроизведения видео на YouTube для людей с ограниченными возможностями. Я использую onfocus (и изменяю имена классов), а не пользуюсь: focus, чтобы он был совместим с большим количеством браузеров для визуальной обратной связи по выбранной ссылке.

Я бы хотел стилизовать фон элемента списка, когда текстовая / img ссылка получает фокус клавиатуры - это возможно?

Большое спасибо,

Mike

Ответы [ 4 ]

1 голос
/ 17 апреля 2011

Я не знаю, может ли <li> получить фокус (клавиатура) программно, но я могу показать вам, как изменять имена классов программно.

[ edit на основе комментария] Если вы имеете в виду hrefs, здесь - рабочий пример.Используйте вкладку для перехода к следующей ссылке. 

"use strict";  
(function () {

  var refs = document.getElementsByTagName('a'); 
  document.addEventListener('focus', hoverClass, true);

  refs[0].focus();
  setTimeout(emulateHover, 800);

  function emulateHover() {
     if (!document.activeElement.href) {return clearTimeout(0);}
     var index = parseInt(document.activeElement.href.split(/#/)[1], 10);
     var activeElement = refs[index] || refs[0];
     if (activeElement) { activeElement.focus(); }
     setTimeout(emulateHover, 800);
  }

  function hoverClass(evt){
      var srcEl = evt.srcElement || evt.target;
      var i = refs.length;
      while(i--) { refs[i].className = 'a'; }
      if (srcEl && !/a/i.test(srcEl.tagName)) { return clearTimeout(0); }
      var isA = /a$/i.test(srcEl.className);
      srcEl.className = isA ? 'b' : 'a';
  }
  
}());
body {
  font: normal 12px/15px verdana, arial;
}
.a {background-color: #eee; transition: all 0.5s 0s}
.b {background-color: green; color:white; transition: all 0.5s 0s}
a {text-decoration: none;}
<ul>
    <li><a id="first" class="a" href="#1">line 1</a></li>
    <li><a class="a" href="#2">line 2</a></li>
    <li><a class="a" href="#3">line 3</a></li>
    <li><a class="a" href="#4">line 4</a></li>
    <li><a class="a" href="#5">line 5</a></li>
    <li><a class="a" href="#6">line 6</a></li>
</ul>
0 голосов
/ 18 апреля 2011

Найден грязный метод, который, кажется, работает нормально: 

<?php while ($row = mysql_fetch_assoc($result)) {

$js  =  "<script language=\"javascript\">";
$js .=  "function changeClass$id(){";
$js .=  "document.getElementById(\"$id\").setAttribute(\"class\", \"popfocus\");}";
$js .=  "function changeClass1$id(){";
$js .=  "document.getElementById(\"$id\").setAttribute(\"class\", \"pop\");}";
$js .=  "</script>";

echo $js;
echo "<li><div id=\"$id\" class=\"pop\">\n";
echo "<a 

onFocus=\"changeClass$id()\" 
onBlur=\"changeClass1$id()\"
onMouseover=\"changeClass$id()\" 
onMouseout=\"changeClass1$id()\"
0 голосов
/ 17 апреля 2011

Я не думаю, что звучит хорошо использовать фокус (никогда не пробовал, если он работает) для таких элементов HTML, как список.Вместо этого используйте hover.

Я бы пошел со следующим;hover, mouseenter, mouseover. 

$("ul.someclass > li").mouseenter(function() {
    $(this).addClass("current");
  }).mouseleave(function() {
    $(this).removeClass("current");
  });

Для получения дополнительной информации;

http://api.jquery.com/mouseover/

http://api.jquery.com/hover/

0 голосов
/ 17 апреля 2011

, чтобы установить новое значение класса, которое вы можете сделать: 

element.className = "A";

если вы используете jQuery, вы можете: 

$(element).addClass("A");
$(element).removeClass("B");
...