0
Ich mag würde die Farbe der aktiven Seite ändern,Ich möchte die Farbe des aktiven Elements von navbar ändern
Html-Code:
<html>
<head>
<title>Anwar Othmane - Portfolio</title>
<link rel="stylesheet" href="Zwa9.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/media="screen" type="text/css" title="Design" href="design.css">
</head>
<script>
$(function() {
$('#mainnav li a').click(function() {
$('#mainnav li').removeClass();
$($(this).attr('href')).addClass('active');
});
});
</script>
<body>
<div id="nav-bar" class="nav-bar">
<img src="Img/.png"></img>
<ul class="mainnav" id="mainnav">
<li><a href="portfolio.php">PORTFOLIO</a></li>
<li><a href="about_me.php">ABOUT ME</a></li>
<li><a href="contact.php">CONTACT</a></li>
</ul>
</div>
</body>
</html>
Css Code:
#nav-bar {
height:100%;
width: 20%;
color: #070707;
background-color: #efefef;
font-size: 14px;
box-shadow: -6px 0px 10px rgba(0, 0, 0, 0.5);
}
#nav-bar img {
margin-left: 10%;
margin-bottom: 10px;
margin-top: 20px;
vertical-align: middle;
}
#nav-bar a {
text-decoration: none;
color: #070707;
}
#nav-bar a:active {
color: red;
}
#mainnav > .active > a {
color: red;
}
#nav-bar ul.mainnav {
list-style-type: none;
margin: 0;
margin-bottom: 100px;
padding: 0;
}
#nav-bar ul.mainnav li {
padding-top: 10px;
margin-left: 20px;
margin-right: 20px;
padding-bottom: 10px;
padding-left: 10px;
border-bottom: 1px dashed #070707;
}
ich würde zum Beispiel gerne den Hintergrund (des aktiven Navigationspunktes) 4B77BE # zu sein ... Sie haben eine Idee? vielleicht JavaScript-Trick? oder nur CSS?
Vielen Dank!
Hallo und willkommen zu Stackoverflow! Was hast du bisher versucht zu erreichen, was du willst? Bitte sehen Sie, wie man fragt: https://stackoverflow.com/help/how-to-ask – ArSeN
Behandle meine Antwort als Tipp; Sie können Ihre aktuelle URL mit [window.location] (https://developer.mozilla.org/en-US/docs/Web/API/Window/location) und einen Pfad durch 'window.location.pathname' abrufen Welcher Wert könnte wirklich leicht mit jQuery zu konditionieren sein. Du kannst damit spielen; https://jsfiddle.net/sh7gzfgn/ (Ich habe es nur zum Beispiel gemacht). –