Question

我正在使用简单的jQuery手风琴，当我点击带有锚点的URL导致标签HMTL元素的ID时，我想打开标签。

真实场景：我有一个带有URL www.domain.com/index.php&something#sometabid的导航链接。如果我点击该链接，我将被重定向到带有该URL的页面，页面滚动到带有CSS id sometabid的折叠式选项卡。在这一点上，我想打开这个手风琴标签，关闭默认状态。

CODE：

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        padding: 20px
    }    
        h4.open-close {
        background: #f5f5f5;
        border: 1px solid #DDD;
        border-radius: 5px;
        box-shadow: 0 1px 0 white inset;
        margin-bottom: 10px;
        padding: 7px;
    }
    .desc {
        overflow: hidden;
        padding-bottom: 10px;
        padding-top: 0;
    }
</style>

<script type="text/javascript">
    $('.desc').hide();
        $('h4.open-close').click(function (evt) {
            evt.preventDefault();
            if ($(this).is('.current')) {
                $(this).removeClass('current');
                $(this).next('.desc').slideUp(400);
            } else {
                $('.desc').slideUp(400);
                $('h4.open-close').removeClass('current');
                $(this).addClass('current');
                $(this).next('.desc').slideDown(400);
            }
        });
</script>
</head>
<body>
    <h4 id="sometabid1" class="open-close">
        <a href="#">Urniki</a>
    </h4>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a luctus mi. Sed non libero turpis. Donec mauris lorem, sollicitudin non facilisis in, fermentum vel tortor.</div>

    <h4 id="sometabid2" class="open-close">
        <a href="#">Dejavnosti</a>
    </h4>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a luctus mi. Sed non libero turpis. Donec mauris lorem, sollicitudin non facilisis in, fermentum vel tortor.</div>
</body>
</html>

jsfiddle link

我知道有一个解决方案，如果你使用jQuery UI手风琴，但我不想使用jQuery UI，因为我更喜欢轻量级解决方案，而且这个附加功能首先没有计划。

提前感谢您的帮助。

Answer 1

首先获取哈希链接：

function getAnchor(url)
{
    var index = url.lastIndexOf('#');
    if (index != -1)
        return url.substring(index);
}

使用此功能，处理您的文档。

currentAnchor = getAnchor(location.href);
$("#" + currentAnchor).show();

或类似的东西。

说明：

请考虑您在网址中：

http://example.com/index.html#slide2

现在使用该功能时：

currentAnchor = getAnchor(location.href);

currentAnchor将slide2作为值。说你有这样的手风琴：

<ul>
    <li class="slide" id="slide1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li class="slide" id="slide2">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li class="slide" id="slide3">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li class="slide" id="slide4">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
    <li class="slide" id="slide5">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
</ul>

现在你可以这样找到合适的手风琴：

$(currentAnchor).show();

在你的情况下，它将是：

    $('.desc').slideUp(400);
    $('h4.open-close').removeClass('current');
    $(currentAnchor).addClass('current');
    $(currentAnchor).next('.desc').slideDown(400);

通过url打开jQuery accordion tab

1 个答案:

说明：