2

我制作了一个功能，可以在单击某个元素时打开并显示一个 div。我在一页上有几个。如何在仅打开某个 div 的情况下链接到该页面？我希望能够像这样链接：“http://domain.com/#cat1”..

超级感谢解答！

HTML：

<a href="#cat1" id="cat1" class="h3 toggle">Lorem ipsum</a>
                        <div class="list-container">
                            <ul class="list">
                                <li class="faq">
                                    <p>Lorem ipsum</p>
                                </li><ul>

JavaScript：

hShow : function(event) {
            var el = $(this),
                arrow = $('span.arrow', this),
                container = el.next('div.list-container'),
                faqList = $('.faq-list:nth(0)', container),
                hList;

            event.stopPropagation();
            event.preventDefault();

            if (container.height() > 0) {
                // collapse
                el.removeClass('expanded');
                container.css({'padding-bottom': '0px'}).animate({'height': '0px'}, 250);
            } else {
                // expand
                hList = faqList.height();
                el.addClass('expanded');
                container.animate({'height': hList +'px'}, 250, function() {
                        $(this).css({
                            'padding-bottom': '10px',
                            'height': 'auto'
                        });
                    });
            }
4

3 回答 3

2

只需使用相同的逻辑处理您的链接点击和页面加载事件。在 div 上方找到一个锚点，并显示对应的 div：

function openDivUnderAnchor(name){
    name = name.replace('#','');
    $('div.collapsible').hide();
    $('a[name='+name+']').next('div').show();
}

$(document).ready(function(){
    // opens the correct div if its link is clicked
    $(document).on('click', 'a.open', function(){
        openDivUnderAnchor($(this).attr('href'));
    });
    // opens the correct div if its anchor is specified in the URL
    openDivUnderAnchor(location.hash);
});​

<ul>
    <li><a class="open" href="#one">first</a></li>
    <li><a class="open" href="#two">second</a></li>
    <li><a class="open" href="#three">third</a></li>
    <li><a class="open" href="#four">fourth</a></li>
</ul>

<a name="one"></a>
<div class="collapsible">first div</div>

<a name="two"></a>
<div class="collapsible">second div</div>

<a name="three"></a>
<div class="collapsible">third div</div>

<a name="four"></a>
<div class="collapsible">fourth div</div>​

工作小提琴：http: //jsfiddle.net/q2v2S/2/

于 2012-11-19T17:35:22.123 回答
1

您可以使用 URL 的“本地部分”，即在http://www.example.com/#cat1之类的 URL 中，# 后面的部分“cat1”。例如，在这部分中输入您要显示的 div 的 id，或者在您的情况下是按钮链接的 id。

首先，您在没有打开任何 div 的情况下显示页面，然后使用 Javascript 使用 document.location.hash 获取本地部分，即您的按钮 ID。然后您只需显示与该 id 对应的 div 或模拟单击按钮。

哈希技术的一个很好的总结：http: //blog.mgm-tp.com/2011/10/must-know-url-hashtechniques-for-ajax-applications/（针对 Ajax 进行了描述，但适用于任何动态）

于 2012-11-19T17:20:11.953 回答
0

我过去这样做的方法是查看 URL 哈希，然后“伪造”点击。

例如：

$(function()
{
if(!location.hash) return; // don't do anything if no hash set

$('a.toggle[href="' + location.hash + '"]').click();
});

因此，在加载（$(function() { ... });）时，如果设置了哈希（if(!location.hash)...），则找到带有类切换的锚标记，该标记将 href 设置为当前location.hash并在其上伪造单击事件。这应该会触发它的扩展，就像用户实际点击它一样。

于 2012-11-19T17:17:44.457 回答