Отключить фокусное поведение на навигационных ссылках?

Довольно много моя проблема минус кнопка - моя проблема относится к якорю ссылки: How to stop buttons from staying depressed with Bootstrap 3 Отключить фокусное поведение на навигационных ссылках?

Я использую Bootstrap 3 (тестирование в FF & Chrome), и мой .navbar фиксируются с scrollspy функцией. Когда я нажимаю ссылку на навигацию, ссылка остается в Фокусировка (и при прокрутке без нажатия на нее - мой навигатор теперь показывает обе ссылки! [1 активна/1фокус]), и единственный способ удалить состояние фокусировки - это щелкните в любом месте вне навигационной системы. Состояние фокусировки не является видимой проблемой в Safari.

Как бы я мог использовать UN-фокусировку навигационной ссылки автоматически с помощью мыши или мыши?

EDIT: Mouseup/mousedown не был основной проблемой, как считалось ранее.

My #nav в случае, если кому-то интересно. Благодаря!

<body id="page-top" data-spy="scroll" data-offset="" data-target=".navbar-fixed-top"> 

    <nav role="navigation" id="nav" class="navbar navbar-inverse navbar-fixed-top"> 
     <div class="container-fluid"> 
       <a class="navbar-brand" href="#page-top">TOP</a> 
      </div> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav navbar-right text-center"> 
        <li><a href="#about">ABOUT</a></li> 
        <li><a href="#work">WORK</a></li> 
        <li><a href="#contact">CONTACT</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav>

источник

2015-03-05 Jenn

Почему бы не использовать событие mouseup и удалить класс, который вызывает фокус со всех элементов навигационной панели? – VeldMuijz

Оказывается, проблема фокуса была в стилях CSS, поэтому события mouseup не работали. – Jenn

См. [«Если вопросы включают« теги »в их названиях?»] (Http://meta.stackexchange.com/questions/19190/should-questions-include-tags-in-their-titles), где консенсус «нет, они не должны»! –

Особенное деталь, решить мою дилемму. Теперь работает в FF и Chrome.

The (scrollspy) активное звено, которое необходимо, чтобы быть в стиле

.navbar-inverse .navbar-nav > .active > a:focus {color: #262A3A;}

.navbar .nav > li > a:focus {color: red;} и удалены, что задержался под на MouseDown.

источник

2015-03-06 14:31:29 Jenn

Если я правильно понял ваш вопрос, вы хотите использовать только класс .active css для отображения выбранного навигатора. Один из вариантов заключается в том, чтобы переопределить цвет загрузки bootstrap на сфокусированных навигаторах.

.navbar-inverse .navbar-nav>li>a:focus { 
    color:#777; 
    outline:none; // to remove possible blue borders 
}

http://jsfiddle.net/sygn/3k7e88p9/

источник

2015-03-05 20:23:32 ztadic91

Я попытался изменить цвета раньше, но поведение фокуса все равно застревает независимо от цвета. – Jenn

@Jenn вы можете представить пример кода, где показана ваша проблема? – ztadic91

Приведенный мной пример jsfiddle не может распознавать ссылки как сфокусированные, когда я его кодирую. Вот альтернативный шаблон, который также продемонстрировал мою проблему: http://ironsummitmedia.github.io/startbootstrap-scrolling-nav/ Это действительно тонко, но когда вы нажимаете на любую навигационную ссылку, то прокрутите (не нажимайте нигде else), эта фокусная ссылка будет более темного цвета, чем остальные ссылки, пока вы не нажмете в другом месте на странице. Вы правы с точки зрения стилизации фокуса navs - я отредактирую выше, что сработало. Благодаря! – Jenn

JQuery решение, так как вы просили MouseDown/MouseUp:

$(".navbar-brand").mouseup(function(){ 
    $(this).blur(); 
});

https://jsfiddle.net/re2hLe8r/

источник

2015-03-05 20:24:44 Will

К сожалению, это и многие его варианты не помогли мне. – Jenn

Отключить фокусное поведение на навигационных ссылках?

ответ

Смежные вопросы