使用URL的href值的目標div

我有一個簡單的網站，其中每個「頁面」實際上是一個section。這些部分使用position:absolute和z-index分層堆疊在一起;當點擊導航項目時，具有與導航項目的類名相匹配的id的部分被提升到堆棧的頂部，從而改變「頁面」。使用URL的href值的目標div

現在有什麼讓我卡住，但是，正在弄清楚如何從另一節內容中的鏈接定位特定節。我知道我必須做的事情的要點，但就執行情況而言，我已經迷失了方向。

我如何想象它需要去是這樣的：

$('section a[href^=#]').click(function(){ 
       var target = $(this).attr(href).(strip the hashtag from the beginning of the link and output the resulting value); 
$('body').find('section[id='+target+']').addClass('active').css('z-index', '2') 
$('body').find('section[id!='+target+']').removeClass('active').css('z-index', '1') 
       });

我想這涉及到正則表達式不知怎麼的，我一無所知。有什麼想法嗎？

來源

2011-08-26 ajw-art

無需使用regexen：爲鏈接的基礎DOM對象公開Location interface，它給你的網址的瀏覽器本身明確解析的部分直接訪問。該hash屬性保存的是錨部分，包括領先的#，所以切片一個字符關：

this.hash.slice(1);

甚至，因爲你可以爲一個ID選擇重用#：

$(this.hash).addClass...

來源

2011-08-26 22:42:48 bobince

太棒了，謝謝！我不知道你可以像你在第二個例子中那樣從'this'中提取數據。我對Jquery仍然很陌生，所以當我走的時候，我一直在困惑這一切。 –

@art：的確，這不是jQuery功能，它是底層瀏覽器DOM的一部分。有些東西是Plain Old DOM所做的，jQuery並沒有真正幫助你，因此很好地瞭解這兩者。 – bobince

不需要正則表達式的簡單拆分可以

var id = ""; 
var ar = $(this).attr('href').toString().split('#'); 
if(ar.length>0) 
    id = ar[1]; 
if(id.length > 0)

//你的邏輯在這裏處理它，不要忘了在你的邏輯返回false，否則將繼續執行

$(this)是點擊鏈接

來源

2011-08-26 22:15:23

謝謝！因爲簡單一點，我最終選擇了bobince的解決方案。 –

這是比其他的答案更容易一點，假設你的HREF看起來都像#section_id var target = $(this).attr(href).substring(1);

其實這裏是另一種解決方案。由於#是jquery id選擇器，因此您甚至不需要對該字符串進行任何處理。你可以這樣做也

var section_id = $(this).attr('href'); 
$('.section').removeClass('active').css('z-index', '1'); //set all sections to z-index 1 
$(section_id).addClass('active').css('z-index', '2'); //set the section you want to z-index 2

來源

2011-08-26 22:23:56

This Works！我甚至都沒有想過爲什麼我需要散列符號來定位我想要的部分。儘管我最終使用了bobince的方法，因爲它不需要聲明一個變量。 –

是的，這個解決方案更加優雅。 –

使用URL的href值的目標div

回答

相關問題