1
Ich habe ein Layout, das Tabs hat, mit einem Akkordeon innerhalb und einer anderen Reihe von Tabs in diesem. Innerhalb jedes inneren Tabs möchte ich eine Reihe von Checkboxen haben. Wenn ich sie einfüge und sie style, gibt es einen Konflikt zwischen ihnen und dem CSS für die äußeren Tabs. Daher habe ich den Nicht-Selektor verwendet, sodass die Eingabestile für die Registerkarten nicht auf die Kontrollkästchen angewendet werden, aber nicht angewendet wurden.: nicht() Selektor funktioniert nicht
Hier ist ein CodePen, dass das Problem zeigt: CodePen
.wrap-tabs {
section {
display: none;
padding: 20px 0 0;
border-top: 1px solid #ddd;
}
input:not(.squaredFour) {
display: none;
}
label:not(.squaredFour) {
display: inline-block;
margin: 0 0 -1px;
padding: 15px 25px;
font-weight: 600;
text-align: center;
color: #bbb;
border: 1px solid transparent;
}
label:hover:not(.squaredFour) {
color: #888;
cursor: pointer;
}
input:checked+label:not(.squaredFour) {
color: #555;
border: 1px solid #ddd;
border-top: 2px solid orange;
border-bottom: 1px solid #fff;
}
#tab1:checked~#content1,
#tab2:checked~#content2,
#tab3:checked~#content3,
#tab4:checked~#content4 {
display: block;
}
}
.access-privilages {
padding: 10px;
}
.access-privilages .tabContent {
padding: 10px;
}
.access-privilages .panel-heading a:after {
font-family: 'Glyphicons Halflings';
content: "\2212";
float: left;
color: #fff;
font-size: 16px;
line-height: 16px;
margin-right: 8px
}
.access-privilages .panel-heading a.collapsed:after {
content: "\2b";
}
.access-privilages .panel-group .panel+.panel {
margin-top: 1px;
}
.access-privilages .panel-group .panel {
border-radius: 0;
}
.access-privilages .panel {
border: 0 none;
}
.access-privilages .panel-group .panel-heading+.panel-collapse>.panel-body {
border-top: 0 none;
}
.access-privilages .panel {
-webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, .05);
box-shadow: 0 0px 0px rgba(0, 0, 0, .05);
}
.access-privilages .panel-default>.panel-heading {
color: #fff;
border-radius: 0;
background-color: @dark-subtle;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
color: @primary;
}
.squaredFour {
position: relative;
label {
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
background: #fcfff4;
background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
border-radius: 4px;
box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
}
label:after {
content: '';
width: 9px;
height: 5px;
position: absolute;
top: 4px;
left: 4px;
border: 3px solid #333;
border-top: none;
border-right: none;
background: transparent;
opacity: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
label:hover::after {
opacity: 0.5;
}
input[type=checkbox] {
visibility: hidden;
}
input[type=checkbox]:checked+label:after {
opacity: 1;
}
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="wrap wrap-tabs">
<h4>Portal Settings</h4>
<a ng-click="job.back()" class="backlink"><i class="fa fa-arrow-circle-o-left"></i> Go Back</a>
<h1>Settings</h1>
<p>Modify your portal-wide settings here</p>
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1"><i class="fa fa-truck"></i> Delivery Rules</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2"><i class="fa fa-truck"></i> Collection Rules</label>
<input id="tab3" type="radio" name="tabs">
<label for="tab3"><i class="fa fa-cog"></i> Global Settings</label>
<input id="tab4" type="radio" name="tabs">
<label for="tab4"><i class="fa fa-address-book"></i> Account Settings</label>
<section id="content1">
<h4>Delivery Rules</h4>
<div class="access-privilages">
<!-- Accordions -->
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse_hradmin">Economy</a>
</h4>
</div>
<div id="collapse_hradmin" class="panel-collapse collapse in">
<div class="panel-body">
<!-- Tabs -->
<ul class="nav nav-tabs">
<li class="active">
<a id="personal" href="#tabContent_personal">Monday</a>
</li>
<li><a id="financial" href="#tabContent_financial">Tuesday</a></li>
</ul>
<div class="tabContent" id="tabContent_personal">
<h4>Monday</h4>
<div class="squaredFour">
<input type="checkbox" value="None" id="squaredFour" name="check" checked />
<label for="squaredFour"></label>
</div>
</div>
<div class="tabContent" id="tabContent_financial" style="display: none;">
<h4>Tuesday</h4>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse_rmgadmin" class="collapsed">Next Day</a>
</h4>
</div>
<div id="collapse_rmgadmin" class="panel-collapse collapse">
<div class="panel-body">
<!-- Tabs -->
<ul class="nav nav-tabs">
<li class="active">
<a id="nd-monday" href="#nextday-monday">Monday</a>
</li>
<li><a id="nd-tuesday" href="#nextday-tuesday">Tuesday</a></li>
</ul>
<div class="tabContent" id="nextday-monday">
<h4>Monday</h4>
</div>
<div class="tabContent" id="nextday-tuesday" style="display: none;">
<h4>Tuesday</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="content2">
<h4>Collection Rules</h4>
</section>
<section id="content3">
<h4>Global Settings</h4>
</section>
<section id="content4">
<h4>Account Settings</h4>
</section>
</div>
Soooo, der Wähler ist: nicht() zu arbeiten? haha Entschuldigung. Schlechter Witz. –