0
Ich benutze [email protected] und ich bin die vier nav tab Ich versuche, ich bin ein paar Seite nach der Anzeige 4 navtab, aber ich möchte Anzeige klicken Sie auf die Seitenanzeige 4 navtab nach aktiv Spaces Schaltfläche und klicken Sie auf eine andere Registerkarte aktiv ein anderes navtab, und keine aktive vorherige Registerkarte Schaltfläche.Bootstrap 4 nav Registerkarte aktiv Registerkarte Ausgabe
Schauen Sie sich mein Codebeispiel an, mein Leertaste ist immer aktiv, bitte helfen Sie mir, das Problem zu beheben.
/*footer-navtab*/
.footer-tab .tooter-nav-tab {
padding: 2rem;
height: 10vh;
width: 100%;
margin-left: 0rem;
background: white;
border-top: 1px solid #c9cfd9;
display: inline;
text-align: center;
}
p.tab-txt {
font-size: 0.7rem;
}
.footer-tab ul {
list-style-type: none;
margin: 0;
padding: 0;
border-top: 1px solid #c9cfd9;
overflow: hidden;
background-color: #ffffff;
}
.footer-tab li {
float: left;
}
.footer-tab .nav-tabs .nav-link.active {
color: white;
background-color: #8bb6f3;
border-color: #ddd #ddd #fff;
}
.footer-tab li a {
display: block;
color: #3f5370;
text-align: center;
padding: 18px 16px;
text-decoration: none;
}
.footer-tab li a:hover {
background-color: #8bb6f3;
color: white;
}
.footer-tab-img a:hover {
background-color: #8bb6f3;
color: white;
}
/*footernavtab*/<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<!--footer-tab-section-->
<div class="footer-tab">
<ul class="nav nav-tabs" role="tablist">
<li class="img-01 w-25">
<a href="#">
<span class="footer-tab-img">
\t \t \t \t \t <img src="/Image/users.png">
\t \t \t \t \t </span>
<p class="tab-txt">Setting</p>
</a>
</li>
<li class="img-02 w-25">
<a href="#" class="nav-link active ">
<span class="footer-tab-img">
\t \t \t \t \t \t <img src="/Image/personal-card.png">
\t \t \t \t \t \t </span>
<p class="tab-txt">Spaces</p>
</a>
</li>
<li class="img-03 w-25">
<a href="#">
<span class="footer-tab-img">
\t \t \t \t \t \t \t <img src="/Image/book.png">
\t \t \t \t \t \t \t </span>
<p class="tab-txt">Exercises</p>
</a>
</li>
<li class="img-04 w-25">
<a href="#" class="active">
<span class="footer-tab-img">
\t \t \t \t \t \t \t \t <img src="/Image/first-aid-kit.png">
\t \t \t \t \t \t \t \t </span>
<p class="tab-txt">Profile</p>
</a>
</li>
</ul>
</div>
<!--end footer-tab-section-->
This is what makes your navbutton active. Remove this so it is not active. Add this to a button to make it active again. – Granny
sir/madam did you mean i should apply this '' – core114
Yes, i just edited it so the Active is **bold**. The active class makes the button active. If you want this to correspond to the page you are on at that time, add the active class to that button on that specific page. – Granny