0

问题:

用户可以使用“tab”键浏览页面并登陆“tabs”面板。但是,当它们最初登陆“选项卡”面板时 - 没有视觉指示(轮廓/突出显示/等)它们在那里。

- 结果,他们认为他们的选项卡键(或选项卡面板)无法正常工作。

笔记:

我怀疑这种新行为是由于从 1.8.x 升级到 1.10.x 时发生的 CSS 更改 - 但是,当然,我不确定。

我已经尝试了各种 css 条目来使焦点选项卡在视觉上勾勒/突出显示...-到目前为止,在选项卡上似乎具有视觉效果的是这个选择器:

    .ui-widget :focus     
    { 
        border-style: inset !important;
        border-width: 5px !important;
    }

...但是,此选择器过于宽泛,会影响页面上位于 tabs() DIV 之外的其他小部件。--我只想在“标签”DIV 中“突出显示”重点标签。

问题:

如何构建一个 CSS 选择器来突出显示/勾勒焦点选项卡,同时不影响其他非选项卡小部件

(谢谢你的帮助)

jQuery脚本

    $(document).ready(function() {
        $('#tabdiv').tabs();  //<== tabs
        $( "input[type=submit], a, button" ).button().click(function( event ) {event.preventDefault();});        
        $( "#datepicker" ).datepicker();
    });

css

    .ui-widget :focus 
    { 
        border-style: inset !important;
        border-width: 3px !important;
    }   

HTML 片段

    <div>
        <h1>body-A</h1>
        <div id="tabdiv">
            <ul>
                <li><a href="#tabA">TabA</a></li>            
                <li><a href="#tabB">TabB</a></li>
                <li><a href="#tabC">TabC</a></li>
                <li><a href="#tabD">TabD</a></li>
            </ul>
            <div id="tabA">
                <div>
                    <span>tabA stuff</span>
                </div>
            </div>
            <div id="tabB">
                <div>
                    <span>tabB stuff</span>
                </div>
            </div>      
            <div id="tabC">
                <div>
                    <span>tabC stuff</span>
                </div>
            </div>
            <div id="tabD">
                <div>            
                    <span>tabD stuff</span>
                </div>
            </div>
        </div>
        <div>
            <p>Date: <input type="text" id="datepicker" /></p>

            <button>A button element</button> 
            <input type="submit" value="A submit button" /> 
            <a href="#">An anchor</a>        
        </div>
    </div>          
4

2 回答 2

0

您可以使用以下选择器

[id~=tab]:focus
于 2013-08-15T15:59:18.047 回答
0

看来,以下作品...

    .ui-widget#tabdiv :focus 
    { 
        border-style: inset !important;
        border-width: 3px !important;
    } 

谢谢!

于 2013-08-15T16:16:54.167 回答