JQuery UI Tabs- Потеря фокуса меняет стили

Итак, я с помощью вкладок JQuery UI здесь: http://cjsheatingandair.com JQuery UI Tabs- Потеря фокуса меняет стили

При первой загрузке страницы активной вкладки не это якорь в фокусе. При нажатии на другую вкладку эта вкладка активируется. Затем, когда вы нажимаете на другое место на странице, вкладка остается активированной, но якорный текст теряет фокус и меняет стиль.

Есть ли способ связать фокус и активную вкладку, чтобы пользователь мог щелкнуть другие места в окнах и не потерять стиль фокуса? Или, возможно, удалить фокусировку?

источник

2014-07-09 zakkleifeste

NetworkError: 404 Not Found - http://cjsheatingandair.com/resources/demos/style.css "и какой язык" Когда страница сначала загружает активную вкладку, она не активна ». Предлагает вам загрузить firebug для firefox или начать использовать инструменты разработчика в Chrome. Вы можете видеть, как эти элементы вызывают динамически при перемещении мыши по сайту. также можно увидеть ошибки загрузки/javascript. – zipzit

Якорная вещь кажется мне очень здоровой .. Единственное, что я вижу, это цвет шрифта выбранной вкладки при первом выборе. Его едва заметный вид. вы щелкните в другом месте на странице. Вероятно, нужно исправить это в CSS (или, может быть, у вас уже есть, мы просто не можем его увидеть, потому что ваш файл demos/style.css не загружается.) Ouch. Это WordPress сайт? Почему о, почему вы не используете детскую тему? Занимает около 7 или 8 минут, чтобы научиться экономить часы и часы спустя ... – zipzit

Извините. Я сделал немного больше копания и понял, что использовал неправильную терминологию. Я отредактировал его сейчас. Я использую дочернюю тему и да, это wordpress, но вкладки jQuery просто закодированы. Я использую инструменты для разработчиков, и теперь я вижу, что «фокус» - вот что вызывает мою проблему. .ui-state-focus, если быть точным. Есть ли способ удалить фокусировку? – zakkleifeste

Это то, что я в конечном итоге с помощью http://jsfiddle.net/BJ8vZ/ Благодаря Атул Гупта

<style> 
#tabs {border-bottom:1px solid #ccc;height:33px;margin:0 0 10px;padding-top:5px;background:#eee;} 
#tabs a {float:left;margin-left:2px;border-radius:3px 3px 0 0;border:1px solid #eee;border-bottom-color:#ccc;color:#08c;height:32px;line-height:32px;padding:0 12px;text-decoration:none;} 
#tabs a:hover {background:#ddd;color:#058;border-color:#ddd #ddd #ccc;} 
#tabs a.active {background:#fff;color:#555;border-color:#ccC#ccC#fff;} 
#tabs a.active:hover {background:#fff;color:#555;border-color:#ccC#ccC#fff;} 
#tabs_data fieldset {display:none;border:0;} 
#tabs_data fieldset div {font-size:13px;} 
</style> 
<div id="tabs"> 
<a href="#" onclick="tab_click(0);">tab 1</a> 
<a href="#" onclick="tab_click(1);">tab 2</a> 
<a href="#" onclick="tab_click(2);">tab 3</a> 
</div> 
<div id="tabs_data"> 
<fieldset> contents of tab 1</fieldset> 
<fieldset> contents of tab 2</fieldset> 
<fieldset> contents of tab 3</fieldset> 
</div> 
<script> 
var tabActive=1, tabs=document.getElementById('tabs').getElementsByTagName('A'), tabs_data=document.getElementById('tabs_data').getElementsByTagName('fieldset'); 
function tab_click(x){ 
    if(x > -1 && x < tabs.length && x < tabs_data.length){ 
     tabs[tabActive].setAttribute('class',''); 
     tabs_data[tabActive].style.display='none'; 
     tabActive=x; 
     tabs[tabActive].setAttribute('class','active'); 
     tabs_data[tabActive].style.display='block'; 
    } return false; 
}tab_click(0); 
document.onkeydown=function (evnt){ 
    if(evnt.keyCode==37 || evnt.keyCode==39) 
    tab_click(tabActive+evnt.keyCode-38); 
} 
</script>

источник

2014-07-10 20:07:32 zakkleifeste

JQuery UI Tabs- Потеря фокуса меняет стили

ответ

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