Question

我想使用CSS制作标签内容。我已经制作了自定义标签样式，但我无法使用CSS制作内容。谁能告诉我怎么做到这一点？

CSS：

.tabs {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.tabs li {
    margin: 0 2px;
    padding: 10px;
    cursor: pointer;
    background: white;
    display: inline-block;
}
.tabs li:not(.active):hover
{
    background: #ccc;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}
.tabs li > a
{   
    text-decoration: none;
    color: gray
}
.tabs li.active
{
    z-index: 1000;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    border: 1px solid #ccc;
    border-bottom-color: #fff;
    color: grey;
    cursor: default;
}
.tabs:after
{
    position: absolute;
    content: "";
    width: 100%;
    z-index: 1;
    bottom: 0;
    left:0;
    border-bottom: 1px solid #ddd;
}
.tabs:before
{
    z-index: 1;
}

HTML：

<ul class="tabs">
            <li class="active"><a href="#tab1">Home</a></li>
            <li><a href="#tab2">Contact</a></li>
            <li><a href="#tab3">Services</a></li>
        </ul>

Fiddle

Answer 1

有多种方法可以实现“纯 CSS ”标签控件。在此example中，我修改了JSFiddle的HTML部分，以便在<div>标记内添加<li>内容。然后我添加了这两个样式来临时隐藏非活动标签。

/* Content specific css for tabs*/
.tabs li div {
    display: none;
}

/* Content specific css for the active tab */
.tabs li.active div {
    display: block;
    position:absolute;
    left:0px;
}

然后 changed 您想要<a>作为标题链接，因为那些不会在“纯 CSS ”中带有状态。我通过使用无线电输入（一次只强制一个活动标签）删除了.active渲染无用的内容。此更改中唯一的破坏性反应是在有效的tab内容 CSS 选择器上。而不是之前的：.tabs li.active div，现在是以下内容：

.tabs input[name=tabs]:checked ~ div

已转换为：选择divs并添加已检查的同级input代码named tabs。

您实际上非常接近您的实现，您的主要错误可以通过忽略以下声明来解释：保留纯CSS中的状态需要无线电或复选框输入。

干杯！： - ）

Answer 2

这就是你想要的

body {
	margin: 0;
	background-color: #5E6EBF;
}
.tab-menu {
	margin: 20px auto;
	padding: 0 76px;
}
.tabs {
	width: 150px;
	display: inline-block;
	position: relative;
	height: 45px;
}
.tab-content {
	display: none;
}
.tabs input {
	margin: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
	cursor: pointer;
	opacity: 0;
}
.tabs label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	text-align: center;
	line-height: 40px;
	transition: all 0.3s ease;
	background-color: #ffffff;
	border-top-right-radius: 5px;
	border-top-left-radius: 5px;
}
.tab-content p {
	line-height: 29px;
	font-style: italic;
}
.tabs input:checked + label {
	background-color: #4B5898;
	color: #ffffff;
	font-weight: 600;
}
.tabs input:checked ~ .tab-content {
	display: block;
	position: fixed;
	top: 65px;
	width: 1200px;
	padding: 10px;
	box-sizing: border-box;
	margin: 0 auto;
	left: 76px;
	background-color: #4B5898;
	color: #ffffff;
}
@media screen and (max-width:1300px){
	.tabs input:checked ~ .tab-content {
	max-width: 800px;
}
}
@media screen and (max-width: 991px){
	.tabs input:checked ~ .tab-content {
	max-width: 500px;
}
}

@media screen and (max-width: 650px){
	.tab-menu {
	padding: 0 10px;
}
.tabs input:checked ~ .tab-content {
	left: 10px;
}
}

@media screen and (max-width: 525px){
	.tabs {
		width: 80px;
		height: 40px;
	}
	.tabs input:checked ~ .tab-content {
	left: 10px;
	top: 60px;
	max-width: 270px;
}
}

<div class="tabs-container">
		<div class="tab-menu">
			<div class="tabs">
				<input type="radio" name="myradio" checked>
					<label>TAB1</label>
				</input>
				<div class="tab-content">
					<h3>One Content</h3>
					<p>Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publ</p>
				</div>
			</div>
			<div class="tabs">
				<input type="radio" name="myradio">
					<label>TAB2</label>
				</input>
				<div class="tab-content">
					<h3>Two Content</h3>
					<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage,</p>
				</div>
			</div>
			<div class="tabs">
				<input type="radio" name="myradio">
					<label>TAB3</label>
				</input>
				<div class="tab-content">
					<h3>Three Content</h3>
					<p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form,</p>
				</div>
			</div>
		</div>
	</div>

https://codepen.io/Vikaspatel/pen/zMNZWv

如何在CSS中制作标签？

Fiddle

2 个答案: