如何删除 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，） 见下文 woriknig sn -p

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>