首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >当单击div时,希望.focus()属性保持不变

当单击div时,希望.focus()属性保持不变
EN

Stack Overflow用户
提问于 2014-09-17 02:44:33
回答 2查看 44关注 0票数 0

这是我用来操作选项卡函数的代码。

代码语言:javascript
复制
   <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要保持页面加载上的焦点效果是

代码语言:javascript
复制
$(document).ready(function(){
       $('.button1').focus();
});

这只是显示所选选项卡的白色背景,但当我单击其他选项卡链接(包括与选项卡相关的div中的选项卡)时,焦点效果(白色)会下降,并且您无法分辨您在哪个选项卡上。

有人能帮我做一些jquery来获得焦点效果,只有当其他选项卡被点击时才能删除吗?谢谢!

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-09-17 04:22:10

试试这段代码

代码语言:javascript
复制
<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:

代码语言:javascript
复制
*{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:

代码语言: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

票数 0
EN

Stack Overflow用户

发布于 2014-09-17 02:53:48

.focus()聚焦所选元素,允许您的CSS与:focus匹配,因此无法聚焦多个元素,您也不希望阻止用户将任何其他内容聚焦在页面上。使用activeselected类和addClass方法。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/25881451

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档