Question

我正在尝试使用Codeigniter + Smarty + javascript

创建常见问题解答页面

此代码：

$(document).ready(function() {
    $('dd').hide(); 

    $('dt').click(function(){ 
        $(this).next('dd').slideToggle('slow'); 
    });

    $('a.close').click(function (){ $(this).parent('dd').slideUp('slow'); });
 });

和我的.tpl文件类似

<dl>
    <dt>Question one</dt>
    <dd>Answer to question one</dd>
</dl>

我试图让网页根据网址跳转到某个问题。例如：www.example.com/faq#q11跳转到问题11.我使用<span id='q11'>执行此操作但我现在遇到其他问题。当我输入网址时，问题就会打开，我的意思是如果我真的去www.example.com/faq#q11，浏览器会将我转到问题但是我必须点击它来切换答案。

我希望当我输入某个问题的网址时，它会自动切换回答。

Answer 1

这是你准备好的功能：

if(window.location.hash)
    {
        //set the value as a variable, and remove the #
        var hash_value = window.location.hash.replace('#', '');
        //something like $('#'+hash_value).toggle();
    }

编辑：未经过测试，但您可以使用$(window.location.hash)，因为window.location.hash已包含ID选择器。

Answer 2

这通常是使用路由服务\模块完成的，而且很多MVC框架都带有内置的路由服务。

如果您选择在没有第三方库的情况下完成此操作，您可以创建一个简单的路由器功能来处理您的网站在DOMReady上的路线：

function ifRoute( Hashtag, Callback ){
    if (window.location.hash.indexOf( Hashtag ) != -1)
        Callback();
}

然后，在DOMReady上，你会像这样使用它：

jQuery(document).ready(function(){
    ifRoute( 'q11', function(){
        //show answer...
        //do other cool stuff...
    });
});

这是一个非常简单的例子，只会对DOMReady有所帮助 - 但我希望它足以帮助你，并且至少指出你正确的方向。

跳转到页面部分并执行javascript函数

2 个答案: