0

我正在使用简单的 jQuery 手风琴，当我单击带有指向选项卡 HMTL 元素 ID 的锚点的 URL 时，我想打开选项卡。

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

代码：

<!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链接

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

在此先感谢您的帮助。

4

1 回答 1

3

首先获取哈希链接：

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

并使用它来处理您的文档。

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

或类似的东西。

解释：

假设您在 URL 中：

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);
于 2012-10-30T09:13:22.250 回答