根据 URL 中的哈希移动 HTML

Move HTML based on hash in URL

本文关键字：移动 HTML 哈希 URL 根据      更新时间：2023-09-26

当用户访问页面时，我想做什么，url中的锚点将决定顶部显示哪些内容。这应该在客户端完成，而不是在服务器端完成。

例如，假设我有 HTML：

<div id='menuitems'>
  <div id='appetizer'>HTML here</div>
  <div id='maincourse'>HTML here</div>
  <div id='dessert'>HTML here</div>
</div>

所以我想要的是当用户访问此页面时：

mypage.html#dessert

与通常的锚文本行为不同，我想使用 jquery 之类的东西将甜点文本移动到顶部。所以用户看到的HTML是这样的：

<div id='menuitems'>
  <div id='dessert'>HTML here</div>
  <div id='appetizer'>HTML here</div>
  <div id='maincourse'>HTML here</div>
</div>

或：mypage.html#maincourse 

<div id='menuitems'>
  <div id='maincourse'>HTML here</div>
  <div id='appetizer'>HTML here</div>
  <div id='dessert'>HTML here</div>
</div>

如果没有锚点或无法识别，则不要执行任何操作。

怎么样

$(document).ready(){
    $('#menuitems > ' +location.hash).prependTo('#menuitems');
});

http://api.jquery.com/prependTo/

$(function() { 
    $(window.location.hash).prependTo('#menuitems') 
});

您不想替换所有链接属性。你可以这样做（使用 Jquery）：

$('a[href^="#"]').on('click', function(){
    window.location.hash = $(this).attr('href');
    return false;
});
相关文章：