我在单个导航页面中更改了 Logo 图像。这意味着，例如，页面中有 2 个选项卡，如“主页”和“联系方式”。
这是一个带有垂直对齐选项卡的单页导航，在其上方会有 Logo 。当我滚动到底部时，它将移动到联系人选项卡，该页面的背景颜色也会发生变化。这时我也改变了形象。
下面是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>
我必须将该 nav-logo CSS 样式设置为通用样式，以便在从一张 table 移动到另一张 table 时更改图像。
最佳答案
$("yourtablename").mouseenter(function ( ) {
$("#nav-logo").css({"background-image":"url(yourimageurl)"});
})
像这样
关于javascript - 如何在单个导航页面中更改 Logo 图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10923963/