Question

我的常见问题页面看起来像下面显示的标记

当页面加载时，我想要显示与URL中的书签对应的答案

网址的格式为www.mydomain.com/page#q1

我试图这样做，但它不起作用 - 任何想法如何解决它？

console.log($(hash).length)

的长度为1，因此它选择了一个dom元素

我已经使用相同的功能在脚本上点击进一步显示它 - 并且工作正常

$(function () {

        var hash = window.location.hash;
        //hash = hash.replace('#', '');
        console.log('hash:' + hash);
        console.log($(hash).length);

        $(hash)
            .parent()
            .parent()
            .find("dd.answer")
            .slideToggle();

        $("dd.answer")
                .hide();

        $("dt.question")
                .click(function () {
                    $(this)
                        .parent()
                        .find("dd.answer")
                        .slideToggle();
                });
    });

<dl>
    <dt class="question">
        <a id="q1"></a>
        Question 1
    <dd class="answer" style="display: none;">
        Answer 1
    </dd>
</dl>
<dl>
    <dt class="question">
        <a id="q2"></a>
        Question 2
    <dd class="answer" style="display: none;">
        Answer 2
    </dd>
</dl>
<dl>
    <dt class="question">
        <a id="q3"></a>
        Question 3
    <dd class="answer" style="display: none;">
        Answer 3
    </dd>
</dl>

Answer 1

你在使用哈希显示后隐藏了dds。

试试这个：

<html>

    <head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script>
    $(function () {

        var hash = window.location.hash;
        //hash = hash.replace('#', '');
        console.log('hash:' + hash);
        console.log($(hash).length);

        $('dd').hide();

        $(hash).parents('dl').find('dd').slideToggle()

        $("dt.question")
                .click(function () {
            $(this)
                        .parent()
                        .find("dd.answer")
                        .slideToggle();
        });
    });

</script>
</head>

<body>

<dl>
    <dt class="question">
        <a id="q1"></a>
        Question 1
    <dd class="answer" >
        Answer 1
    </dd>
</dl>
<dl>
    <dt class="question">
        <a id="q2"></a>
        Question 2
    <dd class="answer" >
        Answer 2
    </dd>
</dl>
<dl>
    <dt class="question">
        <a id="q3"></a>
        Question 3
    <dd class="answer" >
        Answer 3
    </dd>
</dl>

</body>

</html>

Answer 2

试试这个：

var hash = "#" + window.location.hash;

当URL中的原始#被删除时，因为它是哈希开始的指示符 JQuery期望ID选择器以#开头，因此您必须自己添加它。

jquery - 在定义列表中显示答案

2 个答案: