我有一个我想要创建的标签的代码。
<style>
nav.tab {
margin: 0;
padding: 0;
display: block;
width: 150px;
overflow: hidden;
border: 1px solid #ccc;
background-color: black;
float: left;
}
#static {
margin-left: 200px;
}
/* Float the list items side by side*/
section.tab {float: left;}
/* Style the links inside the list items*/
nav.tab a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
font-family: Segoe UI;
}
/*Change background color of links on hover */
nav.tab a:hover {
background-color: purple;
color: white;
}
/* Create an active/current tablink class */
nav.tab a:focus, .active {
background-color: white;
color: purple;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border-top: none;
height: 700px;
width: 600px;
}
</style>
<nav class="tab">
<a href="#" class="tablinks" onclick="openSetting(event,'Profile')">Profile</a>
<a href="#" class="tablinks" onclick="openSetting(event, 'Password')">Password</a>
<a href="#" class="tablinks" onclick="openSetting(event, 'Tokyo')">Tokyo</a>
</nav>
<div id="static" class="container">
<div id="Profile" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Password" class="tabcontent">
<h4 style="font-family: Segoe UI; color: purple; padding: 15px 0 15px 0;">Change Password</h4>
<p id="label">Enter OLD Password</p><input type="password" id="field" size="25" name="oldpassword" required="required"><br/><br/>
<p id="label">Enter NEW Password</p><input type="password" id="field" size="25" name="newpassword" required="required"><br/><br/>
<p id="label">Enter NEW Password AGAIN</p><input type="password" id="field" size="25" name="newpassword2" required="required"><br/><br/>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
</div>
<script>
function openSetting(evt, settingName) {
var i, tabcontent, tablinks;
$('.tabcontent a:first').tab('show');
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(settingName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
我正在尝试默认显示第一个标签。 截至目前，当页面加载时，由于显示：无;＆＃39;，因此无法看到标签的任何内容。 css值。但我需要在加载时显示第一页。
请帮帮我。
答案 0 :(得分：0)
据我所知，您只需要将类“.active”设置为第一个选项卡。
<a href="#" class="tablinks active" onclick="openSetting(event,'Profile')">Profile</a>
在js中，当你处理点击选项卡时，执行以下操作：
$(nav.tab>a).removeClass('active');
答案 1 :(得分：0)
也许你想使用jqueryui？标签包含在那里。
bootstrap也提供了很好的标签：
http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_tab&stacked=h
答案 2 :(得分：0)
尝试此解决方案 - ＆gt; https://css-tricks.com/css3-tabs/
同时尝试创建一个新类，例如选择类，并使用该类管理选定的选项卡（也是默认选定的选项卡），然后使用JS添加或删除该类。
另见这 - ＆gt; http://www.menucool.com/tabbed-content
见你！
答案 3 :(得分：0)
只需在document.ready：
上使用所需的参数激活该函数openSetting(event, 'Profile');
openSetting(event, 'Profile');
function openSetting(evt, settingName) {
var i, tabcontent, tablinks;
//$('.tabcontent a:first').show();
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(settingName).style.display = "block";
evt.currentTarget.className += " active";
}nav.tab {
margin: 0;
padding: 0;
display: block;
width: 150px;
overflow: hidden;
border: 1px solid #ccc;
background-color: black;
float: left;
}
#static {
margin-left: 200px;
}
/* Float the list items side by side*/
section.tab {
float: left;
}
/* Style the links inside the list items*/
nav.tab a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
font-family: Segoe UI;
}
/*Change background color of links on hover */
nav.tab a:hover {
background-color: purple;
color: white;
}
/* Create an active/current tablink class */
nav.tab a:focus,
.active {
background-color: white;
color: purple;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border-top: none;
height: 700px;
width: 600px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav class="tab">
<a href="#" class="tablinks" onclick="openSetting(event,'Profile')">Profile</a>
<a href="#" class="tablinks" onclick="openSetting(event, 'Password')">Password</a>
<a href="#" class="tablinks" onclick="openSetting(event, 'Tokyo')">Tokyo</a>
</nav>
<div id="static" class="container">
<div id="Profile" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Password" class="tabcontent">
<h4 style="font-family: Segoe UI; color: purple; padding: 15px 0 15px 0;">Change Password</h4>
<p id="label">Enter OLD Password</p>
<input type="password" id="field" size="25" name="oldpassword" required="required">
<br/>
<br/>
<p id="label">Enter NEW Password</p>
<input type="password" id="field" size="25" name="newpassword" required="required">
<br/>
<br/>
<p id="label">Enter NEW Password AGAIN</p>
<input type="password" id="field" size="25" name="newpassword2" required="required">
<br/>
<br/>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
</div>
答案 4 :(得分：0)
假设第一个标签显示为默认标签。 这些是变化
资料
在关闭函数openSetting的括号后添加此行。
document.getElementById("defaultOpen").click();