m0_67254273 2024-03-27 22:17 采纳率: 0%
浏览 10

纯前端怎么利用超链接内容渲染页面

前端怎么根据点击超链接的内容，渲染出不同的页面信息展示呢？只用一个页面，可以根据点击信息不同而显示不同的内容

  • 写回答

2条回答 默认 最新

  • 专家-皆知 2024-03-27 22:17
    关注

    引自免费微信小程序：皆我百晓生

    要在纯前端利用HTML5实现根据点击超链接内容渲染不同页面，你可以采用JavaScript和jQuery来实现。下面是一个简单的例子：

    1. 首先，创建一个HTML文件，设置一个基本的HTML结构，并添加一些超链接：
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面渲染示例</title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="page1.html" target="_blank">页面1</a></li>
            <li><a href="page2.html" target="_blank">页面2</a></li>
            <li><a href="page3.html" target="_blank">页面3</a></li>
        </ul>
    </nav>
    <main id="main-content">
        <!-- 页面内容将在这里渲染 -->
    </main>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>
    1. 接下来，创建一个名为script.js的JavaScript文件，编写一个简单的脚本来处理页面渲染：
    $(document).ready(function () {
    $('a').on('click', function (event) {
        // 阻止默认行为
        event.preventDefault();

        // 获取链接的目标页面
        var targetPage = $(this).attr('href');

        // 切换页面
        $('body').load(targetPage);

        // 关闭当前页面
        event.target.blur();
    });
});

    在这个例子中，当用户点击一个超链接时，页面会根据链接的目标页面进行渲染。注意，我们使用了target="_blank"属性来确保链接在新窗口或新标签中打开。

    这个例子只是一个简单的演示，你可以根据需要扩展和修改它，以适应你的项目。

    评论 编辑记录

报告相同问题？

问题事件

  • 创建了问题 3月27日

悬赏问题

  • ¥15 100 内验证哥德巴赫巴赫猜想
  • ¥15 需要在vitis下实现彩调视频图像累加，并输出
  • ¥15 解决不了的LNK2019错误
  • ¥20 MATLAB仿真三相桥式全控整流电路
  • ¥15 EDA技术关于时序电路设计
  • ¥15 百度文心一言流式返回sse失败
  • ¥15 由于远程方已关闭传输流，身份验证失败
  • ¥15 rt-detr，PCB，目标检测
  • ¥15 有偿求指导实证代码。cfps清洗合并后，无论是构建平衡面板还是非平衡面板，都是只剩几百个样本量。求指导一下哪里出问题了，不要潦草回复
  • ¥15 mutlinichenet