Setzen Sie den Link zu festen aktiven

Hallo ich möchte meine "Home" -Link aktiv sein, wenn in der Startseite. wie kann ich es so auf dem Bild fixiert wie im Bild sehen. Ich möchte, dass der Link auf der Startseite so bleibt. Gib mir bitte Ideen, wie es geht.Setzen Sie den Link zu festen aktiven

hier ist das Bild von dem, was mein Projekt wie sein nicht gesetzt aussieht, wenn auf der Homepage.

hier ist mein HTML-Code.

<!DOCTYPE html> 
<html> 
<head> 
    <title>Student Portal</title> 
    <link rel="stylesheet" href ="css/bootstrap.min.css"> 
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> 
    <link href="style.css" rel ="stylesheet"> 
    <link rel="shortcut icon" type="img/png" href="img/asd.png"/> 
</head> 
<body> 
    <div class ="top-bar-dark"> 
     <div class="container"> 
      <div class="row"> 
        <div class="col-sm-4 col-xs-7"> 
         <div class="top-bar-socials"> 
          <a href="https://www.facebook.com/pages/Governor-Andres-Pascual-CollegeNavotas-City/344134628983014?fref=ts"> 
           <i class="fa fa-facebook"></i> 
          </a> 
          <a href="https://twitter.com/official_gapc"> 
           <i class="fa fa-twitter"></i> 
          </a> 
          <a href="https://www.linkedin.com/company/governor-andres-pascual-college-in-navotas-city"> 
           <i class="fa fa-linkedin"></i> 
          </a> 
         </div> 
        </div> 
        <div class="col-sm-8 col-xs-5 text-right"> 
         <ul class="list-inline top-dark-right">      
          <li class="hidden-sm hidden-xs"><i class="fa fa-envelope"></i> [email protected]</li> 
          <li class="hidden-sm hidden-xs"><i class="fa fa-phone"></i> (02) 282-9036</li> 
          <li><a href="#" class="login"><i class="fa fa-lock"></i> Login</a></li> 
         </ul> 
        </div> 
      </div> 
     </div> 
    </div> 
     <nav class="navbar navbar-default navbar-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse"> 
       <span class="icon-bar" ></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
       <img class="img-responsive"src="images/brandz.png"> 

     </div> 

    <div class="collapse navbar-collapse" id="nav-collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About us</a></li> 
       <li><a href="#">Admissions</a></li> 
      <li><a href="#">Contact us</a></li> 
      <li><a href="#">Faculty Portal</a></li> 
        <!-- Modal --> 
         <div id="myModal" class="modal fade" role="dialog"> 
          <div class="modal-dialog"> 
        <!-- Modal content--> 
          <div class="modal-content"> 
           <div class="modal-header"> 
            <img class ="modal-logo center-block" src="images/asd.png" > 
           </div> 
           <div class="modal-body"> 
            <form role="form"> 
             <div class="form-group"> 
              <div class="input-group"> 
               <div class="input-group-addon"><i class="glyphicon glyphicon-user"></i></div> 
               <input type="username" class="form-control" placeholder="Student No."> 
              </div> 
             </div> 
             <div class="form-group"> 
              <div class="input-group"> 
               <div class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></div> 
               <input type="password" class="form-control" placeholder="Password"> 
              </div> 
             </div> 

             <div class="form-group"> 
              <button type="button" class="btn btn-danger btn-sm btn-block">Log in</button> 
             </div> 
            </form> 
           </div> 

          </div> 
          </div> 
         </div> 
     </ul> 
    </div> 
</div> 
</nav> 
    <script src="js/jquery-1.12.4.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
</body> 
</html>

Hier ist meine CSS-Code.

.top-bar-dark { 
    background-color: #a92419; 
} 

.top-bar-light { 
    background-color: #f3f3f3; 
} 
.top-bar-light .top-dark-right li { 
    border-color: #ddd; 
} 

.top-bar-light .top-dark-right li a:hover { 
    color: #32c5d2; 
} 
.top-bar-socials { 
    line-height: 30px; 
    padding-top: 5px; 
} 
.top-bar-socials:after { 
    display: table; 
    clear: both; 
    content: ""; 
} 
.top-bar-socials a { 
    margin: 0px 8px; 
    text-decoration: none; 
    font-size:18px; 
    color: #fff; 
} 

.top-dark-right { 
    margin: 0px; 
    padding: 0px; 
} 

.top-dark-right li { 
    line-height: 40px; 
    border-left: 1px solid #932015; 
    padding: 0px 10px; 

} 

.top-dark-right li, .top-dark-right li a { 
    color: #d7d7d7; 
    font-size: 12px; 
} 

.top-dark-right li i { 
    margin-right: 5px; 
} 

.top-dark-right li a:hover { 
    color: #fff; 
} 
a.login{ 
    text-decoration: none; 
} 
.fa-facebook:hover{ 
    color:#3b5998; 
} 
.fa-twitter:hover{ 
    color:#1dcaff; 
} 
.fa-linkedin:hover{ 
    color:#007bb5; 
} 
.navbar-default .navbar-nav > li > a { 
font-weight: 590; 
color: #949494; 
display: block; 
padding: 5px 35px 2px 45px; 
border-bottom: 3px solid transparent; 
line-height: 80px; 
text-decoration: none; 
transition: border-bottom-color 0.5s ease-in-out; 
-webkit-transition: border-bottom-color 0.5s ease-in-out; 
} 
.navbar-default{ 
background-color:#fff; 
margin: 0; 

} 
.nav>li>a { 
position: relative; 
} 
.navbar-default .navbar-right > li > a { 
padding: 0 30px; 
} 
.navbar-default .navbar-toggle .icon-bar { 
background-color: #000000; 
margin:0 0 4px; 
width: 25px; 
height: 5px; 
} 
.nav.navbar-nav > li{ 
display: :inline-block; 
} 
.nav.navbar-nav{ 
list-style-type:none; 
} 
.nav.navbar-nav > li > a:hover{ 
    color:#a92419; 
    border-bottom-color: #a92419; 
    } 

    .navbar-default .navbar-toggle .icon-bar { 
    background-color:#a92419 ; 
    margin:0 0 4px; 
    width: 25px; 
    height: 5px; 

    } 
    .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{ 
    background: none; 
    } 
    button.navbar-toggle{ 
    background:none; 
    border:none; 
    color:#000; 
    margin: 0px; 
}

Quelle

2016-06-01 nethken

Ich empfehle das alles in eine Geige zu setzen, damit wir Ihnen leichter helfen können – happymacarts

Ist Ihre Website statisch? Kannst du die Klasse nicht einfach zu den Elementen hinzufügen, die auf jeder einzelnen Seite so gestaltet werden sollen? – Titulum

Wenn Sie das Bootstrap Theme CSS verwenden, können Sie nur die .active-Klasse zum li hinzufügen und es sollte das Styling übernehmen, das Sie anfordern – happymacarts

ändern Sie bitte Ihre css

.nav.navbar-nav > li > a:hover, .nav.navbar-nav > li.active a{ 
    color:#a92419; 
    border-bottom-color: #a92419; 
    }

und die aktive Klasse in Ihrem HTML an die li Startseite hinzufügen

<li class="active"><a href="#" >Home</a></li>

fiddle

Quelle

2016-06-01 05:28:15 happymacarts

Ich habe diesen Code, wenn Sie meinen Code sehen. was ich will ist, den Link "Home" so zu bleiben, wenn es auf der Startseite ist .. – nethken

Fügen Sie die Klasse = "active" zu Ihrem li-Element – happymacarts

auch beachten Sie, dass ich die "active" -Klasse in der CSSFechtel-CSS hinzugefügt habe Linie 101 https://jsfiddle.net/happymacarts/a25cw233/ – happymacarts

wie diese way.Use Aktive Klasse Anprobieren bestimmtes Seitenmenü. Für den unteren Rand Stil muss vielleicht etwas mehr CSS-Stil hinzufügen.

<ul class="nav navbar-nav navbar-right"> 
    <li class="active"><a href="#">Home</a></li> 
    <li><a href="#">About us</a></li> 
    <li><a href="#">Admissions</a></li> 
    <li><a href="#">Contact us</a></li> 
    <li><a href="#">Faculty Portal</a></li> 
    </ui> 

    //Addd css like this 
    .navbar-nav li.active { 
    color:red; 
    border-bottom: 1px solid red; 
     }

Quelle

2016-06-01 05:41:05 mrhossen

Setzen Sie den Link zu festen aktiven

Antwort

Verwandte Themen