如何开始建立在JavaScript/HTML的标签，而不是它是空白的，并且必须点击一个

你好，我有一个标签系统内置在JavaScript/HTML和CSS目前它只显示任何东西，如果你先点击它但我想知道如果我可以使标签的内容自动显示在页面加载和侧边栏在这里打开的是，让我的侧边栏工作如何开始建立在JavaScript/HTML的标签，而不是它是空白的，并且必须点击一个

function openTab(evt, tabName) { 
var i, tabcontent, tablinks; 
tabcontent = document.getElementsByClassName("tabcontent"); 
for (i = 0; i < tabcontent.length; i++) { 
    tabcontent[i].style.display = "none"; 
} 
tablinks = document.getElementsByClassName("tablinks"); 
for (i = 0; i < tablinks.length; i++) { 
    tablinks[i].className = tablinks[i].className.replace(" active", ""); 
} 
document.getElementById(tabName).style.display = "block"; 
evt.currentTarget.className += " active"; 
}

here代码是我目前的工作。如果你的网站想看看如何选项卡的行为

这里是我的css

#tab-ul{ 
list-style-type: none; 
list-style: none; 
margin: 0; 
padding: 0; 
overflow: hidden; 
background-color: #006666; 
width: 100%: 

} 

/* Float the list items side by side */ 
#tab-li { 
float: left; 
background: #006666; 
border-top: 1px solid #006666; 

} 

/* Style the links inside the list items */ 
a#tab-li a { 
display: inline-block; 
color: black; 
text-align: center; 
padding-bottom:12px; 
padding-top:12px; 
padding-left: 7px; 
padding-right: 6px; 
text-decoration: none; 
transition: 0.3s; 
font-size: 14px; 
} 

/* Change background color of links on hover */ 
#tab-li a:hover { 
background-color: #006666; 

} 

/* Create an active/current tablink class */ 
#tab-li a:focus, .active { 
background-color: darkcyan; 
} 

/* Style the tab content */ 
.tabcontent { 
display: none; 


}

来源

2016-09-21 Nicholas Hendricks

你试过设置选项卡类作为默认的活动？ –

对不起，我不明白 –

您是否曾尝试将'active'类添加到默认打开的html选项卡中？ –

找到这个特殊的HTML

<div id="chatrooms" class="tabcontent">

将其更改为：

<div id="chatrooms" class="tabcontent" style="display: block;">

这应该为你工作。正如我期待在F12工具，我不能看到类被改变了一下，只是样式属性

对于hightligh 定位：

<a href="#" class="tablinks" onclick="openTab(event, 'chatrooms')">Chatrooms</a>

更改为：

<a href="#" class="tablinks active" onclick="openTab(event, 'chatrooms')">Chatrooms</a>

请注意，Active类应该遵循“tablinks”类后，因为你的JavaScript正在取代“活动”，包括空白

来源

2016-09-21 14:23:26 Raimonds

谢谢你帮助了一堆，你认为你可以告诉我如何使标签突出显示时，它加载 –

Chatrooms 我没有真正在代码中第一次挖，活动类实际上是设置为制表符而不是tab-内容只需将类别“活动”添加到要突出显示的选项卡 – Raimonds

这似乎不起作用，但它不会突出显示它，但是当我单击其他选项卡时，它将该内容添加到当前内容的底部但你的第一种方法工作很好只是没有突出标签 –

如何开始建立在JavaScript/HTML的标签，而不是它是空白的，并且必须点击一个

回答

相关问题