jquery实现跨页面锚点定位跳转
0
最佳答案
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
我是跳转页面锚点定位，我的解决策略是通过#传参的方式，截取后判断
其他回答(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>
我通过传参解决锚点定位
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显示对应的内容。
现在可以试试学习 vue.js 3 了
– 快乐的凡人721 1年前@快乐的凡人721:这个项目用的是jQuery，js
– 是程序喵哇 1年前