如何更改单个导航页面中的徽标图像

我已在单个导航页面中更改徽标图像。这意味着，例如，在页面中有2个选项卡，如“主页”和“联系人”。如何更改单个导航页面中的徽标图像

这是一个带有垂直对齐选项卡和以上的单页导航，将会有徽标。当我滚动到底部时，它将移动到联系人选项卡，并且该页面的backgorund颜色也会更改。在这个时候我也改变了形象。

下面是css文件

/* ----anchor---- */ 
a, a:link{ 
    color:#6db0da; 
    text-decoration:none; 
} 
a:hover, a:active{ 
    color:#6db0da; 
    text-decoration:underline; 
} 

.story { height: 1000px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; box-shadow: 0 0 50px rgba(0,0,0,0.8);} 

#home { background: #00617b; } 
#contact { background: #46AA27; } 

#container { 
    width: 945px; 
    margin: 0 auto; 
    display: block; 
    overflow: hidden; 
    z-index: 55; 
    height: 100%; 
} 

nav{ 
    width: 250px; 
    height: 100%; 
    float: left; 
    display: block; 
    overflow: hidden; 
    text-align: center; 
    position: fixed; 
    z-index:500; 
} 

nav #nav-logo{ 
    font-family: "BebasNeueRegular", Arial, Helvetica, sans-serif; 
    font-size:43px; 
    text-transform:uppercase; 
    text-align:center; 
    color:#FFF; 
    text-decoration:none; 
    display:block; 
    font-weight:normal; 
    text-shadow: #2B0D09 0px 1px 0px; 
    background:url(../images/Home.png) no-repeat center; 
    height: 250px; 
    width: 250px; 
}

以下

是HTML页面

<!DOCTYPE HTML> 
<html class="no-js" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Single Page Navigation</title> 
<meta name="description" content="" /> 
<meta name="keywords" content="" /> 
<meta name="author" content="" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="css/reset.css"> 
    <link rel="stylesheet" href="css/style.css"> 

</head> 

<body> 
<section id="top"></section> 
    <section id="home" class="story"> 

<div id="container"> 
     <nav><div class="active" id="nav-logo"></div> 
     <ul id="nav"> 
     <li class="active" id="nav-1"><a href="#home">Home</a></li> 
     <li id="nav-2"><a href="#contcat">Contact</a></li> 


     </ul> 
     <div class="bg_bottom"></div> 
    </nav> 
    <div id="content"> 

<div id="loader" class="loader"></div> 
    <div id="ps_container" class="ps_container"> <span class="ribbon"></span> 
     <div class="ps_image_wrapper"> 
     <img src="images/1.jpg" alt=""/> 
     </div> 
     <div class="ps_next"></div> 
     <div class="ps_prev"></div> 
     <ul class="ps_nav"> 
     <li class="selected"><a href="images/1.jpg" rel="images/thumbs/1.jpg">Image 1</a></li> 
     <li><a href="images/2.jpg" rel="images/thumbs/2.jpg">Image 2</a></li> 
     <li><a href="images/3.jpg" rel="images/thumbs/3.jpg">Image 3</a></li> 
     <li><a href="images/4.jpg" rel="images/thumbs/4.jpg">Image 4</a></li> 
     <li><a href="images/5.jpg" rel="images/thumbs/5.jpg">Image 5</a></li> 
     <li class="ps_preview"> 
     <div class="ps_preview_wrapper"> 
     </div> 
     <span></span> 
     </li> 
     </ul> 
    </div> 

</div> 
</div> 

    </section> 

    <section id="contact" class="story">  
<div id="container">  

    <div id="content"> 
Test 
</div> 
</div> 
    </section> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script src="js/jquery.tweet.js" charset="utf-8"></script> 
<script src="js/jquery.slideshow.js"></script> 
<script src="js/jquery.nav.js"></script> 
<script src="js/fancybox/jquery.fancybox-1.3.4.pack.js"></script> 
<script src="js/form.js" type="text/javascript"></script> 
</body> 
</html>

我不得不做出这样的资产净值标志CSS样式仿制改变从一个表移动到图像另一个

任何人都可以帮助我吗？

来源

2012-06-07 developer

$("yourtablename").mouseenter(function () { 
    $("#nav-logo").css({"background-image":"url(yourimageurl)"}); 
})

像这样

来源

2012-06-07 01:08:14

如何更改单个导航页面中的徽标图像

回答

相关问题