Хотите, чтобы атрибуты .focus() оставались при нажатии на div

Это код, который я использую для управления функцией табуляции.Хотите, чтобы атрибуты .focus() оставались при нажатии на div

<div id="tabs"> 
     <ul class="ulclass"> 
      <li><a href="#fragment-1" class="button button1"><span>AFFILIATE INFORMATION</span></a></li> 
      <li><a href="#fragment-2" class="button"><span>RESELLING</span></a></li> 
      <li><a href="#fragment-3" class="button"><span>TERMS AND CONDITIONS</span></a></li> 
     </ul> 
     <div id="fragment-1" class="tabtext"> 
     </div> 
     <div id="fragment-2" class="tabtext"> 
     </div> 
     <div id="fragment-3" class="tabtext"> 
     </div> 
    </div> 

<script> 
    $("#tabs").tabs(); 
</script>

Мои JS, чтобы сохранить эффект фокусировки на на странице нагрузки

$(document).ready(function(){ 
     $('.button1').focus(); 
});

это только фон белый, чтобы показать выбранную вкладку, но когда я щелкните в любом месте, но остальные вкладки ссылки (в том числе в div, связанном с вкладкой) эффект фокуса (белый) падает, и вы не можете определить, на какой вкладке вы находитесь.

Может кто-нибудь, пожалуйста, помогите мне с некоторыми jquery, чтобы эффект фокусировки удалялся только при нажатии на другие вкладки? Благодаря!

источник

2014-09-17 charlotteg

Попробуйте этот код

<div class="tab_container"> 
    <a target="1" class="select">Personal</a> 
    <a target="2">Experience</a> 
    <a target="3">Education</a> 
</div> 
<div id="div1" class="tab_link" style="display:block;"> 
    Personal Details Comes here 
</div> 
<div id="div2" class="tab_link" style="display:none;"> 
    Experience Details Comes here 
</div> 
<div id="div3" class="tab_link" style="display:none;"> 
    Education Details Comes here 
</div>

CSS:

*{margin:0; padding:0; font-family:Tahoma; font-size:12px; color:#333;} 
.tab_container{margin:10px; margin-bottom:0;} 
.tab_container a{display:inline-block; padding:0 10px; line-height:25px; background:#eee; border:1px solid #ddd; cursor:pointer;} 
.tab_container a.select{background:#fff;} 
.tab_link{padding:10px; border:1px solid #ddd; margin:0 10px;}

Javascript:

$('.tab_container a').click(function() { 
    $('.tab_link').hide(); 
    $('.tab_container a').removeClass('select'); 
    $('#div' + $(this).attr('target')).fadeIn(); 
    $(this).addClass('select'); 
});

Не забудьте включить JQuery также от JQuery.com

источник

2014-09-17 04:22:10

Пробовал это без везения извините. вам придется попробовать сыграть с css контента, который я думаю, они не переключаются, только первый показывает, когда я нажимаю вкладки, после чего ничего не отображается. – charlotteg

Шутка просто заставила его работать ха-ха, через 2 секунды после говоря это! Благодаря! – charlotteg

.focus() фокусирует выбранный элемент, позволяя вашему CSS соответствовать :focus, нет возможности сфокусировать несколько элементов, и вы не хотите, чтобы пользователь не фокусировал что-либо еще на вашей странице. Используйте класс active или selected и метод addClass.

источник

2014-09-17 02:53:48

Да я попробовал, что первый, используя Добавить Класс, вы бы подумали, что это просто, но я просто не мог заставить его работать! – charlotteg

Использование addClass - путь, если вы столкнулись с любыми проблемами в поиске google, прочитайте документы, а затем, если проблема остается, создайте новый qustion. Это не так сложно. Вместо написания '.focus()' вы пишете '.addClass (« active »)' и меняете свой совпадение ': focus' внутри css на' .active'. –

Хотите, чтобы атрибуты .focus() оставались при нажатии на div

ответ

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