Question

这是我用来操作标签功能的代码。

   <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来帮助我获得焦点效果，只有在点击其他标签时才能删除吗？谢谢！

Answer 1

.focus()关注所选元素，允许您的CSS与:focus匹配，无法关注多个元素，也不希望阻止用户将重点放在页面上。使用active或selected类和addClass方法。

Answer 2

试试此代码

<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.com

包含JQuery

想要在单击div时保留.focus（）属性

2 个答案: