創建懸停和當前頁面狀態與兄弟元素

我有動畫的導航按鈕，並可以實際設置所有與CSS的一個元素的例外。一個箭頭。這是實際的實況頁面。創建懸停和當前頁面狀態與兄弟元素

http://sclarkstudio.com/testing/mm/index.htm

我試圖使箭頭可見和靜態當前頁面上。當類設置爲.arrow時，我有一個懸停腳本來爲箭頭設置動畫，當類設置爲.currenta時，它是靜態的，可見的。

<body id="@@[email protected]@"> <!-- in this case "home" --> 

<nav class="sidebar1"> 
<ul class="navbox"> 
    <li class="navBtn"> 
     <div class="slider on"></div> 
     <a id="BtnText" class="navButton home"href="index.htm">Home</a> 
     <div id="arrow" class="arrow"></div> 
    </li> 
    <li class="navBtn"> 
     <div class="slider on"></div> 
     <a id="BtnText" class="navButton news"href="news.htm">News</a> 
     <div id="arrow" class="arrow"></div> 

and so on... 



</ul> 
</nav>

，我試圖只寫腳本需要改變類的箭頭股利「.currenta」

var bodyID = $("body").attr("id"); 
var url = window.location; 

$(function() { 

$('nav ul li a #BtnText').each(function(){ 
var myHref = $(this).attr('href'); 
if(url == myHref) { 
    $(this).closest('div','#arrow').css('currenta'); 
} 
}); 
});

我一直在拉我的頭髮試圖找出這一個而不是最好的編碼器。

來源

2012-08-03 Scott

第一：ID的應該是唯一的。它只會抓住它與ID

二發現的第一個元素：要添加類使用addClass()

三：window.location永遠==你href這樣的代碼將永遠不會運行。你想檢查它是否包含你的href使用indexOf

第四：你可以用他們的類名抓住元素。

$('.arrow').each(function(){ 
    var $this = $(this); 
    if(window.location.indexOf($this.siblings('a.navButton').attr('href')) > -1){ // 
     $this.removeClass('arrow').addClass('currenta'); 
     // I think you wanted to remove the arrow class.. if not just remove it 
    } 
});

http://jsfiddle.net/9x9uF/

來源

2012-08-03 20:10:38

@ user958101什麼仍然沒有工作？ – 2012-08-03 20:45:02

首先你必須重複id在你的頁面(BtnText and arrow)存在一次以上，將其更改爲class，因爲id必須是唯一的。所以，你的HTML應該像類似以下

<nav class="sidebar1"> 
    <ul class="navbox"> 
     <li class="navBtn"> 
      <div class="slider on"></div> 
      <a class="BtnText" class="navButton home" href="index.htm">Home</a> 
      <div class="arrow"></div> 
     </li> 
     <li class="navBtn"> 
      <div class="slider on"></div> 
      <a class="BtnText" class="navButton news" href="news.htm">News</a> 
      <div class="arrow"></div> 
    </ul> 
</nav>

var url = window.location; 
$(function() { 
    $('nav ul li a.BtnText').each(function(){ 
     var myHref = $(this).attr('href'); 
     if(url.match(myHref)) { // use match 
      $(this).next('div.arrow') 
      .removeClass('arrow').addClass('currenta'); // use removeClass and addClass 
     } 
    }); 
});

DEMO。

更新：

記住清除類arrow你會失去與此類關聯，所以你可以只使用addClass不使用removeClass去除類arrow所有樣式之後。所以，在這種情況下

$(this).next('div.arrow').removeClass('arrow').addClass('currenta');

應該

$(this).next('div.arrow').addClass('currenta');

來源

2012-08-03 20:10:53

AWWWWWSOME！感謝您的反饋。我很難看到代碼。我仍然需要調整它。我添加了一個var給了我頁面文件名。 var file = location.pathname.substr（location.pathname.lastIndexOf（「/」）+ 1，location.pathname.length）; 然後添加，然後從Sheikh調整腳本。（函數（）{（'nav ul li a.BtnText'））each（function（）{var myHref = $（this）.attr（'href'）; if（file == myHref ）{ }（this）.next（'div.arrow'）。removeClass（'arrow'）。addClass（'currenta'）; }）; }）; 非常感謝。 – Scott 2012-08-03 21:02:42

歡迎您:-) – 2012-08-03 21:05:30

創建懸停和當前頁面狀態與兄弟元素

回答

相關問題