这是我用来操作选项卡函数的代码。
<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 04:22:10
试试这段代码
<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 02:53:48
.focus()聚焦所选元素,允许您的CSS与:focus匹配,因此无法聚焦多个元素,您也不希望阻止用户将任何其他内容聚焦在页面上。使用active或selected类和addClass方法。
https://stackoverflow.com/questions/25881451
复制相似问题