切换按钮/切换器以打开URL

时间:2012-12-19 10:06:38

标签: jquery button slider

我有这个jquery:

<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

我需要在用户更改按钮状态时(主页 - >离开,反之亦然),它会打开一个网址,例如当我在Away上滑动时,我需要打开www.mysite.com/away,当我在“Home”上滑动时,它会打开www.mysite.com/home

提前感谢您的帮助。

3 个答案:

答案 0 :(得分:1)

&#34;开&#34;是一个广义的术语。你可以这样做:

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

...但是会重新加载页面。你的意思是打开弹出窗口吗?

window.open('/home/');

...或者你想重新加载页面并保持选择切换?您可以使用cookie或查看页面加载时的URL。

答案 1 :(得分:0)

window.location会将用户引导到同一窗口中的网址,而window.open()会在新窗口中将其打开。

请参阅小提琴:http://jsfiddle.net/vY7SQ/157/

仅供参考 - 这不是jQuery代码,而是纯JS - 因此即使没有附加jQuery也可以使用它。

我很好奇 - 如果用户只要点击它就会被引导远离它,那么有一个很酷的动画切换滑块开关是什么意思?也许您正在尝试将新内容加载到当前页面而不(重新)加载页面?

答案 2 :(得分:0)

看看您是否要在当前页面打开另一个页面,请使用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/