Question

所以我有一个网页，而不是使用一个新的html文档（它是用于手机，因此每次加载一个新的html页面使得它真的很慢）对于每个页面，我有代表不同页面的部分。

看起来像这样：

<body>

    <!-- each body must contain att least one section that is shown as a page -->
    <section id = "page-1" data-ff-role = "home default swipe-in">

        <!-- each section should have a header -->
        <header style="background-color: #CCE4F5;">

所以我创建的每个部分都有自己的id。现在当我尝试使用：

链接到它时

     function callback_listAllPOI(xmlObj){ 
        console.log("callback_listAllPOI");

        var names = xmlObj.getElementsByTagName("POI_namn");
        var comments = xmlObj.getElementsByTagName("POI_kommentar");
        for (i=0;i<names.length; i++){
            var text = '<li><a href="#page-1">' + names[i].textContent + ': ' + comments[i].textContent + '</a></li>';
            $("#deployPOIList").append(text);
        }

    };

我可以将'li'项添加到目标'ol'并添加文本和所有内容，但href不起作用。按下它时，只需在我的网址末尾添加＃page-1，而不是仅仅转到页面上的锚点。我尝试使用document.createElement（'a'）创建一个标签，但它给出了相同的结果。

编辑：我可以静态地为锚点工作的网页创建一个链接标记，它只是javascript不起作用的锚点。这个就像它应该的那样工作：

<li><a href="#page-1">Page 1</a></li>

编辑2：尝试了两种情况，但对我没有任何影响。因为我必须在昨天完成它，所以我必须做出决定，所以我改为PhP并让它以这种方式工作。感谢您的回答，希望他们能帮助有类似问题的人！

Answer 1

您的代码应该有效。也许您的网页上没有太多内容，以至于浏览器无法滚动到适当的位置。我在小提琴链接中有一个例子：http://jsfiddle.net/z78p7d5L/8/

HTML代码：

<ul id="deployPOIList"></ul>    

<section id = "page-1" data-ff-role = "home default swipe-in">

        <!-- each section should have a header -->
        <header style="background-color: #CCE4F5;">test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
        </header>
    </section>

<section id = "page-2" data-ff-role = "home default swipe-in">

        <!-- each section should have a header -->
        <header style="background-color: #CCE4F5;">testtest test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
        </header>
    </section>

JS代码：

var text1 = '<li><a href="#page-1">hello1</a></li>';
    var text2 = '<li><a href="#page-2">hello2</a></li>';
            $("#deployPOIList").append(text1).append(text2);

Answer 2

我希望你试图模仿JQuery Mobile。在您的情况下，您可能一次显示一个页面并在css的帮助下隐藏其他页面但是，更改URL的哈希值（通过锚点击）无法显示隐藏的元素。如果没有隐藏，它只会尝试滚动到该ID 您可以做的是，附加一个onclick处理程序并首先设置可见性然后滚动。像下面的东西

$(document).on('click', 'anchorSelector', handlePageNavigation);
function handlePageNavigation() {
    var $obj = $(this);
    //get Page Id by inspecting $obj href property
    //use some class to mark active / inactive pages
    //remove the active class with all page section
    //add active class to current page so that its display = block      
}

Javascript锚到同一页面无法正常工作

2 个答案: