0

1つのナビゲーションページでロゴ画像を変更しました。これは、たとえば、[ホーム]と[連絡先]のようにページに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>

あるテーブルから別のテーブルに移動するときに画像を変更するには、そのnav-logoCSSスタイルを汎用にする必要があります。

4

1 に答える 1

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

このようなもの

于 2012-06-07T01:08:14.337 に答える