Question

所以，我在这里使用jQuery UI标签：http://cjsheatingandair.com

当页面首次加载时，活动选项卡不会将其锚定在焦点上。单击另一个选项卡会激活该选项卡。然后当您单击页面上的其他位置时，选项卡保持激活状态，但锚文本失去焦点并更改样式。

有没有办法链接焦点和活动标签，以便用户可以点击窗口中的其他位置而不会丢失焦点样式？或者也可以将焦点全部移除？

Answer 1

这是我最终使用http://jsfiddle.net/BJ8vZ/感谢Atul Gupta

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

jQuery UI选项卡 - 丢失焦点更改样式

1 个答案: