我想改变导航栏

我想更改活动页面的颜色的活跃项目的颜色，我想改变导航栏

HTML代码：

<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代码：

#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; 
}

我想举个例子（活动导航项的背景）为＃4B77BE ...你有想法吗？也许JavaScript技巧？或只是CSS？

非常感谢！

来源

2017-03-26 A. Othmane

您好，欢迎计算器！到目前为止，你有什么尝试去实现你想要的？请参阅如何提问：https://stackoverflow.com/help/how-to-ask – ArSeN

将我的答案视为提示; 您可以使用[window.location]（https://developer.mozilla.org/en-US/docs/Web/API/Window/location）检索您的当前网址，并通过'window.location.pathname'获取路径名这个值可能很容易用jQuery来处理。你可以玩它; https://jsfiddle.net/sh7gzfgn/（我只是举例）。 –

-1

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: white; 
 
\t lenght: 500; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: #000005; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
a:hover; a:active; { 
 
    background-color: #00015b; 
 
} 
 

 
.active { 
 
background-color:#00015b; 
 
} 
 
li.dropdown { 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
    z-index: 1; 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
    text-align: left; 
 
} 
 

 
.dropdown-content a:hover {background-color: #f1f1f1} 
 

 
.show {display:block;}

来源

2017-03-26 01:15:45

我想改变导航栏

回答

相关问题