如何删除 dojo dijit 布局选项卡上的选择突出显示 css

Question

我想消除选择 dijit 布局选项卡时的 css 效果。

当我点击一个选项卡时，有一个看起来不专业的虚线框，您可以在“项目”选项卡中看到。选项卡也变大，上面有一条蓝线。我如何摆脱这些影响 .

这是一个例子：

Answer 1

这很简单，您必须从生成的选项卡 div 中删除 outline。

所以在新版本的 dojo 中，选项卡有 .tabLabel 但较早版本没有最后一个，因此您可以通过

属性访问它

.dijitTabContainer div[role="tab"]

只需应用以下 css（适用于早期和最新版本）

.dijitTabContainer .tabLabel ,.dijitTabContainer div[role="tab"] {
  outline:none;
}

（不是说 dojo 提供了多个 themes 你可以使用，）请参阅下面的工作片段

require([
    "dojo/ready",
    "dojo/on",
    "dijit/registry",
    "dijit/form/Button",
    "dijit/layout/TabContainer",
    "dijit/layout/ContentPane",
    "dojox/layout/ContentPane"
], function(ready, on, registry,Button, TabContainer, ContentPane, ContentPaneX){
    ready(function(){
        var btn = registry.byId("btn");
        var tc = registry.byId("mainTabs");
        var idx = 0;
        on(btn, 'click', function(){
            var newItemPane = ContentPaneX({
                title:'Item ' + idx,
                closable: true,
                id:'item_tab_' + idx,
                iconClass: 'dijitIconUsers'
            });
            idx++;
            
            tc.addChild(newItemPane);
            tc.selectChild(newItemPane);
        });
    });
});

#mainTabs{
    height: 400px;
    width:500px;    
}

.dijitTabContainer .tabLabel ,.dijitTabContainer div[role="tab"]{
  outline:none;
}

<script type="text/javascript">
  dojoConfig = {isDebug: true, async: true, parseOnLoad: true}
</script>

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet"/>

<div class="claro">
<div id="mainTabs" data-dojo-type="dijit/layout/TabContainer">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title: 'Main'">
        <div id="btn" data-dojo-type="dijit.form.Button" data-dojo-props="label: 'Add'"></div>
    </div>        
</div>    
</div>

如何删除 dojo dijit 布局选项卡上的选择突出显示 css

how do you remove selection highlighting css on dojo dijit layout tabs

javascript

css

dojo

tabs

dijit.layout