首页 新闻 会员 周边

jquery实现跨页面锚点定位跳转

0
悬赏园豆:10 [已解决问题] 解决于 2023-08-16 16:39

jQuery如何实现点击图标后,跳转到菜单栏下的指定菜单,并且切换内容,不是滑动,是显示和隐藏

是程序喵哇的主页 是程序喵哇 | 初学一级 | 园豆:114
提问于:2023-08-02 09:42

现在可以试试学习 vue.js 3 了

快乐的凡人721 11个月前

@快乐的凡人721:这个项目用的是jQuery,js

是程序喵哇 11个月前
< >
分享
最佳答案
0

当点击菜单图标时,切换到指定的菜单并显示对应的内容,可以使用以下代码:

HTML代码:

<div class="menu-icon" data-target-menu="menu1">菜单1</div>
<div class="menu-icon" data-target-menu="menu2">菜单2</div>
<div class="menu-icon" data-target-menu="menu3">菜单3</div>

<div id="menu1" class="menu-content">菜单1的内容</div>
<div id="menu2" class="menu-content">菜单2的内容</div>
<div id="menu3" class="menu-content">菜单3的内容</div>

CSS代码:

.menu-content {
  display: none;
}

jQuery代码:

$(document).ready(function() {
  $('.menu-icon').click(function() {
    var targetMenuId = $(this).data('target-menu');

    $('.menu-content').hide();
    $('#' + targetMenuId).show();
  });
});

在上述代码中,我们为菜单图标添加了一个menu-icon类,并为每个菜单图标添加了data-target-menu属性来存储目标菜单的标识符。我们还为菜单内容添加了menu-content类,并使用CSS将其默认隐藏。

在jQuery代码中,我们使用了$(document).ready()来确保页面加载完毕后再绑定事件。当点击菜单图标时,通过data()方法获取目标菜单的标识符,并使用hide()show()方法来切换内容的显示和隐藏。

收获园豆:10
lanedm | 老鸟四级 |园豆:2381 | 2023-08-02 10:38

我是跳转页面锚点定位,我的解决策略是通过#传参的方式,截取后判断

是程序喵哇 | 园豆:114 (初学一级) | 2023-08-02 10:58
其他回答(2)
0
<div class="menu">
  <ul>
    <li><a href="#menu1">菜单1</a></li>
    <li><a href="#menu2">菜单2</a></li>
    <li><a href="#menu3">菜单3</a></li>
  </ul>
</div>

<div class="content">
  <div id="menu1" class="menu-content">菜单1的内容</div>
  <div id="menu2" class="menu-content">菜单2的内容</div>
  <div id="menu3" class="menu-content">菜单3的内容</div>
</div>
<!-- 引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
  $(document).ready(function() {
    // 给菜单栏的链接添加点击事件处理程序
    $('.menu a').click(function(e) {
      e.preventDefault(); // 阻止链接的默认跳转行为
      
      var targetMenu = $(this).attr('href'); // 获取目标菜单的ID
      
      // 隐藏所有菜单内容
      $('.menu-content').hide();
      
      // 显示目标菜单的内容
      $(targetMenu).show();
    });
  });
</script>
NotoChen | 园豆:401 (菜鸟二级) | 2023-08-02 10:42

我通过传参解决锚点定位

支持(0) 反对(0) 是程序喵哇 | 园豆:114 (初学一级) | 2023-08-02 11:00
0

要实现点击图标后跳转到菜单栏下的指定菜单,并切换内容,可以使用jQuery来操作DOM元素的显示和隐藏。以下是一个简单的实现示例:

HTML结构:

html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>跨页面锚点定位跳转示例</title>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#" class="menu-link" data-target="menu1">菜单1</a></li>
<li><a href="#" class="menu-link" data-target="menu2">菜单2</a></li>
<li><a href="#" class="menu-link" data-target="menu3">菜单3</a></li>
</ul>
</div>

<div class="content" id="menu1">内容1</div>
<div class="content" id="menu2">内容2</div>
<div class="content" id="menu3">内容3</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>
JavaScript代码(script.js):

javascript
Copy code
$(document).ready(function() {
// 菜单链接点击事件
$('.menu-link').click(function(event) {
event.preventDefault(); // 阻止默认的链接跳转行为

var targetMenu = $(this).data('target'); // 获取目标菜单的ID

// 显示目标菜单对应的内容,隐藏其他内容
$('.content').hide();
$('#' + targetMenu).show();

});
});
在这个示例中,我们为菜单链接添加了一个data-target属性,用于存储目标菜单的ID。点击菜单链接时,通过jQuery获取目标菜单的ID,并根据ID显示对应的内容。其他菜单对应的内容会被隐藏。

需要注意的是,这是一个前端实现,点击链接后会在同一个页面进行内容的显示和隐藏,而不是真正的页面跳转。如果你需要实现跨页面锚点定位跳转,你需要在链接中加上对应的锚点,并在目标页面根据锚点ID显示对应的内容。

Technologyforgood | 园豆:6766 (大侠五级) | 2023-08-03 22:16
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册