-2
Derzeit auf einem einfachen Tabmenü ich arbeite und wollen einen Pfeil nach unten angezeigt werden, wenn die Registerkarte aktiv ist. Dies ist der aktuelle Code, mit dem ich arbeite. Ich habe ein paar Dinge in jQuery versucht, aber hatte kein Glück. CSS scheint der beste Weg dafür zu sein. Hab ich recht? Wie würdest du das erreichen?hinzufügen Pfeil nach unten zu Tabmenü
Btw, überprüfen Sie den Code in voller Seitenansicht für eine bessere Styling aus.
.tab_menu {
margin: 40px 30px 0 30px;
}
ul.tab {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #ccc;
background-color: rgba(68, 170, 255, 0.1);
}
/* Float the list items side by side */
ul.tab li {
border-left: 1px solid #ccc;
float: left;
margin-bottom: 0;
margin-left: 0;
}
/* Style the links inside the list items */
ul.tab li a {
display: inline-block;
color: black;
/* text-align: center; */
padding: 14px 9px 14px 9px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
margin: 0;
width: 150px;
height: 35px;
text-align: center;
}
/* Change background color of links on hover */
ul.tab li a:hover {
background-color: rgba(68, 170, 255, 0.5);
}
/* Create an active/current tablink class */
ul.tab li a:focus,
.active {
background-color: rgba(68, 170, 255, 0.9);
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 25px 12px;
border: 1px solid #ccc;
border-top: none;
}
.tab_menu a {
text-align: center;
}
.triangle-bottom {
border-top: solid 20px #54b1ff;
border-left: solid 25px transparent;
border-right: solid 25px transparent;
width: 0;
height: 0;
position: absolute;
margin-left: 168px;<div class="tab_menu">
<ul class="tab">
<li><a href="javascript:void(0)" class="active tablinks" onclick="openContent(event, 'coverage');" id="defaultOpen">Our Coverage</a>
<div class="triangle-bottom"></div>
</li>
<li><a href="javascript:void(0)" class="tablinks" onclick="openContent(event, 'claims')">Common Claims</a>
</li>
<li><a href="javascript:void(0)" class="tablinks" onclick="openContent(event, 'bwc')">Buy With Confidence</a>
</li>
<li><a href="javascript:void(0)" class="tablinks" onclick="openContent(event, 'faq')">Frequently Asked Questions</a>
</li>
</ul>
</div>
Wenn der Pfeil nach unten angezeigt werden soll? Und wie sollte es aussehen? Du hast ein Icon dafür? –
Ich habe den Code aktualisiert, um den Pfeil unter dem Tab anzuzeigen. Es ist nicht genau wie es an meinem Ende ist, aber es zeigt zumindest den Pfeil. – trav
Aber Sie nicht erwähnt, wo genau der Pfeil –