主页 / 问题 / 1605630
Accepted
Valek22
Asked:2025-01-27 02:29:26 +0000 UTC2025-01-27 02:29:26 +0000 UTC

如何在一个页面上实现屏幕间的转换

  • 772

我们有一些带有页面选择的菜单，例如，profile-works，现在我们的个人资料处于活动状态，我们单击works并保留在同一页面上。它具有与之匹配的内容。告诉我如何正常切换内容。我是一名新手开发人员，根据我的理解，有必要使具有配置文件的块显示=无，并通过作品使其可见。除了拐杖还有其他选择吗，或者这就是做法吗？ （我知道通过另一个页面执行此操作更容易，但如果我们考虑到所有事情都发生在一个页面上）

javascript

2 个回答

  1. Best Answer

    你所描述的，切换内容而不改变URL页面地址，是使用SPA 技术实现的（使用另一种方法也可以，但是要复杂得多）

    如果你的项目并不真正关心在线推广和 SEO 推广，那么选择任何框架/库（如Vue React Angular），你就能解决你的问题。有大量免费资料和视频教程。

    • 0

  2. 我会建议这个选项：菜单是单独的。<div id="menu"> 菜单元素就在里面。我将制作一个<a>带有事件onclick()或链接的标签href="javascript:...;"以及一个带有样式的 ID。标签<a>可以代替按钮，我在大型网站上见过上百次这种情况，而且自己也这么做过。最主要的是做出漂亮的款式。如果事先不知道菜单项的数量并且需要动态地为它们分配样式，则需要标识符。另外，您可以分配CSS 类，而不是标识符，并一次性为所有菜单元素设置样式，然后指定里面的文本

    该脚本将包含一个处理菜单项点击的函数，将 json 数据对象中的内容 ID 作为参数。例如，我们将其称为“changeContent()现在” - 关于这个数据对象。脚本必须加载信息 - 最方便的方法是使用 json 对象，但您可以按照自己的方式进行操作。例如，这种类型的 json：{"page1":"content страницы 1","page2":"content страницы 2"...} 它来自哪里并不重要，重要的是它是

    好吧，而且在页面的更大区域还有另一个，其中处理菜单项点击的函数中的<div id="content">属性被更改，并且信息是从对象中获取的innerHTMLchangeContent()

    我认为简化的代码是这样的：在<head>我们连接 css-styles 下一步：

    <div id="menu">
    <a href="javascript:changeContent('page1');" id="menu1" class="menuItem"></a>
    <a href="javascript:changeContent('page2');" id=:menu2" class="menuItem"></a>
    <a href="javascript:changeContent('page3');" id="menu3" class="menuItem"></a>
</div>

<div id="content"></div>
<script>
//скрипт, обрабатывающий нажатие
//скрипт лучше подключить по ссылке, чтобы код страницы был чище
function changeContent(idOfPage) {
    document.getElementById("content").innerHTML = objectJson[idOfPage];
}

//также скрипт, назначающий стили  пунктам меню по событию window.onLoad (в случае, если хотите оперировать стилями программно сразу после загрузки страницы (до загрузки javascript не даст))
</script>

    简单来说就是这样，但是非常简略。如果需要对变量等进行额外的操作，则必须添加更多

    • 0

相关问题