jQuery - 使用链接显示/隐藏功能,但阻止链接在URL中打开

时间:2012-05-25 22:59:37

标签: jquery

我有一个很好的jQuery show / hide功能;问题是如果通过直接输入URL来打开链接,它就不会降级很好 - 你可以一次看到所有元素。

有没有办法在show / hide功能中使用链接,但是在直接输入浏览器地址栏时阻止链接打开?

这是我的代码:

的jQuery

$(document).ready(function() {

    $('#nav li a').first().addClass('blue');

    $('#nav li a').click(function(){

    $('#nav li a').first().removeClass('blue');
    $('#nav li a').removeClass('blue');
    $(this).addClass('blue');

    var toLoad = $(this).attr('href')+'#content';  
    $('#content').hide(0,loadContent);  
    $('#load').remove();  
    $('#wrapper').append('<span id="load">LOADING...</span>');  
    $('#load').fadeIn('normal');  
    //window.location.hash = //$(this).attr('href').substr(0,$(this).attr('href').length-0);  
    function loadContent() {  
        $('#conent').load(toLoad,'',showNewContent())  
    }  
    function showNewContent() {  
        $('#content').show(0,hideLoader());  
    }  
    function hideLoader() {  
        $('#load').fadeOut('normal');  
    }  
    return false;  
    });
});  

HTML

<div id="leftcol">

<div id="menu">
<ul id="nav">
<li><a href="/option1">Option 1</a></li><br />
<li><a href="/option2">Option 2</a></li><br />
<li><a href="/option3">Option 3</a></li><br />
</ul>
</div>
</div>

<div id="content">
<div>

1 个答案:

答案 0 :(得分:2)

如果链接的href不是网址,您应该使用#option1

您可以使用hashchange事件来调用显示/隐藏功能吗?

$(window).bind('hashchange', function() {
    showHideFunction(window.location.hash);
});

当您单击链接时,哈希将更改并调用该函数。

如果有人输入地址http://domain.com/#option1
然后你可以在onload函数中获取这样的哈希值。

var hash = window.location.hash;
if(hash) {
    showHideFunction(hash);
}