如何爲不同的Jquery功能創建永久鏈接？

我是Jquery的新手，想要弄清楚一些簡單的事情。我有幾個div點擊各種鏈接時顯示/隱藏。我希望能夠爲每個div提供固定鏈接，以便用戶可以重新加載頁面，而不必導航回他們正在查看的div。如何爲不同的Jquery功能創建永久鏈接？

這是我到目前爲止的jsfiddle。

（注：小提琴框架一直默認爲Mootools的......請重置JQuery用戶界面。）

我的頁面的結構是這樣的：

<div style="width:100%; height:40px; text-align:center;"> 
<a class="one" href="#">One</a> 
<a class="two" href="#">Two</a> 
<a class="three" href="#">Three</a> 
<a class="four" href="#">Four</a> 
</div> 
<div id="one">One</div> 
<div id="two">Two</div> 
<div id="three">Three</div> 
<div id="four">Four</div>

與jQuery腳本，看起來像這

$('a.one').click(function() { 
$("#one").show('slide', { 
    direction: 'right'}); 
$("#two:visible, #three:visible, #four:visible").hide('slide', { 
    direction: 'left'}); 
}); 

$('a.two').click(function() { 
$("#two:hidden").show('slide', { 
    direction: 'right'}); 
$("#one:visible, #three:visible, #four:visible").hide('slide', { 
    direction: 'left'}); 
}); 

$('a.three').click(function() { 
$("#three:hidden").show('slide', { 
    direction: 'right'}); 
$("#one:visible, #two:visible, #four:visible").hide('slide', { 
    direction: 'left'}); 
}); 

$('a.four').click(function() { 
$('#four:hidden').show('slide', { 
    direction: 'right'}); 
$("#one:visible, #two:visible, #three:visible").hide('slide', { 
    direction: 'left'}); 
});

來源

2013-03-13 Emily

將選定的選項卡放入URL的'＃hash'中。然後讓你的'document.ready'函數檢查哈希並模擬相應的'a'上的點擊。 – Barmar 2013-03-13 23:47:06

對不起，我對JQuery並不是很有經驗......你能聯繫我一個如何完成的例子嗎？ – Emily 2013-03-13 23:59:02

推出主播：<a class="one" href="#one">One</a>

現在在JS你可以這樣做：

$(document).ready(function(){ 
    hash = location.hash 
    if(hash) { 
     name = hash.substr(1) 
     $('a.'+name).click(); 
    } 
});

這樣做：一旦頁面加載，它會檢查散列（例如， #one）並從中取出名稱（「one」）。現在它在元素錨點上模擬click（例如a.one）。當然，你在之後做了這個你已經綁定了你的事件。

注意：很多jQuery事件都有一個「getter」和「setter」行爲：如果沒有參數調用，它將返回值/觸發事件/ etc。同時傳遞一個值將分配一個新的值/事件函數/等。詳細信息請查閱鏈接文檔。

來源

2013-03-14 00:01:47 javex

當我將名稱添加到散列時，它會打破滑動轉換。看到這裏：[jsfiddle]（http://jsfiddle.net/Chiisanahime/FFFAj/6/） – Emily 2013-03-14 02:15:08

你知道這是爲什麼嗎？ – Emily 2013-03-14 02:15:26

我猜是因爲錨是爲了導航，它會跳轉到特定的部分。也許你可以以某種方式阻止它。 – javex 2013-03-14 13:28:12

如何爲不同的Jquery功能創建永久鏈接？

回答

相關問題