導航通過JQuery的活動/懸停/非活動狀態

下面的代碼是我有的，但不幸的是它沒有做任何事情。以前我有一個部門爲圖像交換工作，但它更簡單的代碼...如果有一個更簡單的方法來做到這一點，我都是耳朵。導航通過JQuery的活動/懸停/非活動狀態

要回顧一下我試圖做到的是：

土地主頁>在導航將鼠標懸停在選擇上沒有什麼 - 圖像互換所選擇的狀態在點擊圖像被交換到選擇的狀態。

感謝您的幫助！

我遇到的另一個問題是我由藝術家給出的文件在圖像中有文字。我有兩個不同的圖像，其中一個處於選定狀態，另一個處於處於非活動狀態的文本。所以我不能把它上面的文字。

jQuery的

var menu = { 
init: function() { 

    $('.nav-image').hover(function() { 
     if (!$(this).attr('id') != menu._selectedId + '-nav' && $(this).attr('src').indexOf("_on.png") == -1) { 
      var src = $(this).attr('src').replace("_off.png", "_on.png"); 
      $(this).attr('src', src); 
     } 
    }, 

     function() { 

      if ((page == "index" && $(this).attr('id') != "index-nav") || (page == "about" && $(this).attr('id') != "about-nav") || (page == "portfolio" && $(this).attr('id') != "portfolio-nav") || (page == "blog" && $(this).attr('id') != "blog-nav") || (page == "contact" && $(this).attr('id') != "contact-nav") || page == "index") { 
       if (!$(this).attr('id') != menu._selectedId + '-nav' && $(this).attr('src').indexOf("_on.png") >= 0) { 
        var src = $(this).attr('src').replace("_on.png", "_off.png"); 
        $(this).attr('src', src); 
       } 
      } 
     }); 

}}

HTML

<div class="menu"> 
    <div style="float: left; hieght: 45px; width: 193px;"><img src="images/nav/left_end.png" class="nav-image"></div> 
    <div style="float: left; height: 45px; width: 73px;"><a href="index.php"><img src="images/nav/home_off.png" class="nav-image" id="index-nav"></a></div> 
    <div style="float: left; height: 45px; width: 80px;"><a href="about.php"><img src="images/nav/about_off.png" class="nav-image" id="about-nav"></a></div> 
    <div style="float: left; height: 45px; width: 112px;"><a href="portfolio.php"><img src="images/nav/portfolio_off.png" class="nav-image" id="portfolio-nav"></a></div> 
    <div style="float: left; height: 45px; width: 69px;"><a href="http://info.arkmediainc.com/blog"><img src="images/nav/blog_off.png" class="nav-image" id="blog-nav"></a></div> 
    <div style="float: left; height: 45px; width: 98px;"><a href="http://info.arkmediainc.com/contact-us"><img src="images/nav/contact_off.png" class="nav-image" id="contact-nav"></a></div> 
    <div style="float: left; height: 45px; width: 35px;"><img src="images/nav/right_end.png"></div> 
</div>

來源

2012-07-19 Incomudrox

你可以有CSS爲你做。

每個div都可以是任何菜單項的背景圖像，這也可以讓你在上面有文本。

然後使用類似於this sample的代碼。

所以你可以有更乾淨的代碼，爲每個鏈接：

<div class="nav home"><a href="index.php">Home</a></div> 

<script> 
jQuery('.nav').click(function() { 
    jQuery(this).css("background-image",jQuery(this).css("background-image").replace("on","clicked"); 
}); 
<script> 

<style> 
.nav { 
    float: left; 
    height: 45px; 
    width: 73px;; 
} 

.home { 
    background-image: url("images/nav/home_off.png"); 
    } 

.home:hover { 
    background-image: url("images/nav/home_on.png"); 
    } 

</style>

來源

2012-07-19 01:52:43 ShaunOReilly

我遇到的問題是由藝術家給出的文件在圖像中有文字。我有兩個不同的圖像，其中一個處於選定狀態，另一個處於處於非活動狀態的文本。所以我不能把它上面的文字。 – Incomudrox 2012-07-19 16:16:42

只是放置「」或
而不是文字，文字不需要 – ShaunOReilly 2012-07-20 03:20:48

真正有趣的是，今天我需要做的完全一樣，現在我已經有了答案！堆棧溢出非常好！ – ShaunOReilly 2012-08-14 04:55:22

我想，如果你把圖片中的CSS背景圖像，以2班會更容易些，然後只需撥動上了班要素。

來源

2012-07-19 01:54:14 phauwn

導航通過JQuery的活動/懸停/非活動狀態

回答

相關問題