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

How to change logo image in single navigation page

本文关键字：图像 单个 导航      更新时间：2023-09-26

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

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

下面是 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样式设置为通用样式，以便在从一个表移动到另一个表时更改图像。

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

像这样的东西

相关文章：