我正在做一个学校项目。 http://euctester.dk/htx153d/casperh/ep/
我想在此页面上制作一个标签系统：http://euctester.dk/htx153d/casperh/ep/kravogregleruv%C3%A6rdi.html
我尝试过som指南，但没有运气。
这是我的标签HTML。我似乎无法找到如何制作一些JavaScript，这将能够改变不同div的类。
<div id="selector">
<div id="tabs1">
<a href="#tabs_content1"><div id="tabs1-1" class="active">
<p>Generelt</p>
</div></a>
<a href="#tabs_content2"><div id="tabs1-2" class="">
<p>Nybyggeri</p>
</div></a>
<a href="#tabs_content3"><div id="tabs1-3" class="">
<p>Ændret anvendelse</p>
</div></a>
<a href="#tabs_content4"><div id="tabs1-4" class="">
<p>Energirenovering</p>
</div></a>
<a href="#tabs_content5"><div id="tabs1-5" class="">
<p>Tilbygning</p>
</div></a>
</div>
<div id="content">
<div id="tabs_content1" class="tab active">
<h1>Generelt</h1>
<p> text text........... text.....</p>
<p> text text........... text.....</p>
</div>
<div id="tabs_content2" class="tab">
<h1>Nybyggeri</h1>
<p> text text........... text.....</p>
<p> text text........... text.....</p>
</div>
<div id="tabs_content3" class="tab">
<h1>Ændret anvendelse</h1>
<p> text text........... text.....</p>
<p> text text........... text.....</p>
</div>
<div id="tabs_content4" class="tab">
<h1>Energirenovering</h1>
<p> text text........... text.....</p>
<p> text text........... text.....</p>
</div>
<div id="tabs_content5" class="tab">
<h1>Tilbygning</h1>
<p> text text........... text.....</p>
<p> text text........... text.....</p>
</div>
</div>
</div>
答案 0 :(得分：0)
在html代码中，您可以尝试向标签和div myTab添加类似content的类，例如：
<div id="selector">
<div id="tabs1">
<div id="tabs1-1" class="myTab active">
<p>Generelt</p>
</div>
<div id="tabs1-2" class="myTab">
<p>Nybyggeri</p>
</div>
</div>
<div id="tabs1-1_content" class="content" style="display: block;">
<div id="tabs1-1_content1">
<h1>Generelt</h1>
<p>Your content 1</p>
</div>
</div>
<div id="tabs1-2_content" style="display: none;" class="content">
<div id="tabs1-2_content2">
<h1>Nybyggeri</h1>
<p>Your content 2</p>
</div>
</div>
</div>
最后使用这样的jQuery函数：
$('.myTab').on('click', function(){
$('.myTab').removeClass('active');
$('.content').hide();
var content = '#'+$(this).attr('id')+'_content';
$(this).addClass('active');
$(content).show();
});
答案 1 :(得分：0)
我建议使用bootstrap。它非常易于使用。（参考：Bootstrap Tabs）
以下代码将帮助您使用bootstrap显示选项卡。这是JSFiddle
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab1">Generelt</a></li>
<li><a data-toggle="tab" href="#tab2">Nybyggeri</a></li>
<li><a data-toggle="tab" href="#tab3">Ændret anvendelse</a></li>
<li><a data-toggle="tab" href="#tab4">Energirenovering</a></li>
<li><a data-toggle="tab" href="#tab5">Tilbygning</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active">
<h1>Generelt</h1>
<p> text text........... text.....</p>
<p> text text........... text.....</p>
</div>
<div id="tab2" class="tab-pane fade">
<h1>Nybyggeri</h1>
<p> text text........... text.....</p>
<p> text text........... text.....</p>
</div>
<div id="tab3" class="tab-pane fade">
<h1>Ændret anvendelse</h1>
<p> text text........... text.....</p>
<p> text text........... text.....</p>
</div>
<div id="tab4" class="tab-pane fade">
<h1>Energirenovering</h1>
<p> text text........... text.....</p>
<p> text text........... text.....</p>
</div>
<div id="tab5" class="tab-pane fade">
<h1>Tilbygning</h1>
<p> text text........... text.....</p>
<p> text text........... text.....</p>
</div>
</div>
</div>
只需更改代码，您就可以生成垂直标签。
答案 2 :(得分：0)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Tabs using css</title>
<style>
.tabs {
position: relative;
min-height: 220px; /* This part sucks */
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
background-color: aqua;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
background: yellow;
}
[type=radio]:checked ~ label {
background: silver;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
</style>
</head>
<body>
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab One</label>
<div class="content">
Alan McNicoll (1908–1987) was a senior officer in the Royal Australian Navy (RAN) and a diplomat. He graduated from the Royal Australian Naval College in 1926. Attached to the Royal Navy in the Second World War.
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab Two</label>
<div class="content">
The Normandy landings (codenamed Operation Neptune) were the landing operations on Tuesday, 6 June 1944 (termed D-Day) of the Allied invasion of Normandy in Operation Overlord during World War II.
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Tab Three</label>
<div class="content">
Operation Bodyguard was the code name for a World War II deception plan employed by the Allied states before the 1944 invasion of north-west Europe.
</div>
</div>
</div>
</body>
</html>
这是一种可以制作标签的方法，只需使用css
即可在它们之间切换