切換按鍵/開關打開URL

我有這個jQuery：切換按鍵/開關打開URL

<div class="slider-frame"> 
    <span class="slider-button">Change</span> 
</div>

$('.slider-button').toggle(function() { 
    $(this).addClass('on').html('Home'); 
},function(){ 
    $(this).removeClass('on').html('Away'); 
});

對於完整的代碼見this fiddle。

我需要當用戶改變按鈕狀態（home - > away，反之亦然）時，它會打開一個URL，例如：當我在客場滑行時，我需要打開www.mysite.com/away，當我在「主頁」上滑動時，它會打開www.mysite.com/home。

在此先感謝您的幫助。

來源

2012-12-19 Andrea Commensale

要打開的網址在哪裏？你有沒有嘗試過使用iframe或window.open？ – ryadavilli

我想在同一頁面中打開網址。我真的是一個jquey noob ...我嘗試window.open，但似乎不工作。也許我應用它錯了。 –

window.location會將用戶導向到同一窗口中的url，而window.open()將在新窗口中打開它。

見小提琴：http://jsfiddle.net/vY7SQ/157/

僅供參考 - 這不是jQuery代碼，但純JS - 所以你可以使用它，即使沒有連接jQuery的。

我很好奇，雖然 - 如果用戶只要點擊它就被引導離開它，那麼有一個很酷的動畫切換滑塊開關有什麼意義？也許你正試圖在沒有（重新）加載頁面的情況下將新內容加載到當前頁面？

來源

2012-12-19 10:12:54 Dutchie432

Thx！它似乎工作:-)如果我想在「主頁」上設置默認狀態，我該怎麼做？ –

是的。我需要在頁面中顯示一些產品。如果按鈕在「Home」上，則加載「mysite.com/products/home」。之後，我需要在重新加載的頁面中選擇「家庭」。任何想法..？ –

這應該是一個單獨的問題，但由於它很快速......只需將'on'類添加到滑塊按鈕即可。 '更改'請參閱：http://jsfiddle.net/vY7SQ/160/ – Dutchie432

「開放」是一個廣義術語。你可以這樣做：

$(this).addClass('on').html('Home'); 
window.location = '/home/';

...但是，這將重新加載頁面。你的意思是打開一個彈出？

window.open('/home/');

...或者你想重新加載頁面並保持切換選擇？您可以使用cookie或在頁面加載時查看URL。

來源

2012-12-19 10:11:40

我需要在同一頁中打開。 –

看到，如果你想在當前頁面使用AJAX或iframe中打開另一個頁面：

$('.slider-button').click(function() { 
    if ($(this).text() == "Change" || $(this).text() == "Away") { 
     $(this).addClass('on').html('Home'); 
     $('#yourdivToloadContent').load('mysite.com/products/home'); 
    } else if ($(this).text() == "Home") { 
     $(this).removeClass('on').html('Away'); 
     $('#yourdivToloadContent').load('mysite.com/products/away'); 
    } 
});

結賬小提琴：http://jsfiddle.net/WM8xS/

來源

2012-12-19 10:32:02 Jai

這是一個grat解決方案...但我不想使用iframe。我喜歡這個內容顯示在同一個頁面中......你能幫助我嗎？ –

是的PLZ，需要知道你從其他頁面需要什麼。 – Jai

我需要在我的頁面上顯示產品。所以如果我滑到「家」，我需要看到「mysite。com/products/home「，如果我在」Away「」mysite.com/products/away「 –

切換按鍵/開關打開URL

回答

相關問題