Question

我已经创建了一个函数来打开并在单击某个元素时显示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'
                        });
                    });
            }

Answer 1

只需使用相同的逻辑处理链接点击和页面加载事件。在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/

Answer 2

您可以使用网址的“本地部分”，即＃{3}}之后的部分“cat1”之类的网址。在此部分中输入您要显示的div的ID，或者在您的情况下输入按钮链接的ID。

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

一个很好的哈希技术：http://www.example.com/#cat1（针对Ajax描述，但对动态的任何东西都有好处）

Answer 3

我过去这样做的方法是查看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并假冒点击事件就可以了。然后应该触发它的扩展，就像用户实际点击它一样。

从锚链接到达时切换DIV

3 个答案: