当我在网站的某个部分(id链接)时，如何隐藏其他所有内容？

要在网站的某个部分（通过id链接）显示时隐藏其他所有内容，可以使用HTML、CSS和JavaScript来实现。以下是一个简单的示例，展示了如何实现这一功能：

HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hide Other Content</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="content1" class="content">Content 1</div>
    <div id="content2" class="content">Content 2</div>
    <div id="content3" class="content">Content 3</div>

    <a href="#" onclick="showContent('content1')">Show Content 1</a>
    <a href="#" onclick="showContent('content2')">Show Content 2</a>
    <a href="#" onclick="showContent('content3')">Show Content 3</a>

    <script src="script.js"></script>
</body>
</html>

CSS样式

/* styles.css */
.content {
    display: none;
}

.content.active {
    display: block;
}

JavaScript脚本

// script.js
function showContent(id) {
    // Hide all content first
    const allContents = document.querySelectorAll('.content');
    allContents.forEach(content => {
        content.classList.remove('active');
    });

    // Show the selected content
    const selectedContent = document.getElementById(id);
    if (selectedContent) {
        selectedContent.classList.add('active');
    }
}

解释

HTML结构：创建了三个内容块（content1, content2, content3），并为每个内容块创建了一个链接。
CSS样式：默认情况下，所有内容块都是隐藏的（display: none）。当内容块具有active类时，它将显示（display: block）。
JavaScript脚本：showContent函数首先隐藏所有内容块，然后显示用户选择的内容块。

优势

简单易懂：代码结构简单，易于理解和维护。
灵活性：可以轻松扩展以支持更多的内容块。
性能良好：使用CSS类来控制显示和隐藏，性能开销较小。

应用场景

单页应用（SPA）：在单页应用中，通常需要根据用户的操作动态显示和隐藏内容。
导航菜单：当用户点击某个导航链接时，只显示与该链接相关的内容。
模态框：在显示模态框时，隐藏页面上的其他内容。

可能遇到的问题及解决方法

JavaScript未加载：确保JavaScript文件正确加载并且没有语法错误。
- 解决方法：检查浏览器的开发者工具中的控制台，查看是否有错误信息。

CSS冲突：其他CSS规则可能会影响内容的显示。
- 解决方法：使用更具体的选择器或添加!important来确保样式优先级。
动态内容加载：如果内容是通过AJAX动态加载的，确保在内容加载完成后调用showContent函数。
- 解决方法：在AJAX请求的回调函数中调用showContent。

通过这种方式，你可以有效地控制页面上内容的显示和隐藏，提升用户体验。

当我在网站的某个部分(id链接)时，如何隐藏其他所有内容？

、、

我正在尝试这样做，当用户点击一个按钮时，网页上的所有东西都会被隐藏，除了一部分。/div> <a href="#second" onclick="changeDisplay()">link</a> 当您单击该按钮时，文本将消失，并替换为其他内容。请注意，我使用了一个指向id的链接。我引用this Carrd

浏览 24提问于2021-07-08得票数 1

回答已采纳

2回答

当我显示不同的区段时，如何隐藏区段？

、、

基本上，我希望一个部分，以显示在第一个主页。当我单击一个链接时，我希望显示该部分，但隐藏其他所有内容，依此类推。每次我点击一个链接，我只想要显示点击链接的部分。<a href="#about" id="about"

浏览 7提问于2018-02-27得票数 0

2回答

在选择时阻止可怕的水平滚动

、、

我正在为我爸爸的公司编写一个网站，我在选择网页上的内容时遇到了不必要的水平滚动的问题。效果是因为我有两个部分的网站-左和右-所以网站的虚拟宽度是窗口大小的两倍。只

浏览 0提问于2014-02-20得票数 1

3回答

我不明白这个恶意的HTML/CSS在做什么

、

我刚刚清理了一个朋友的电子商务网站。托管公司已经检测到并删除了一些恶意软件，但是我朋友的客户仍然报告在访问他的网站时被定向到色情网站的问题。查看他的网站，似乎恶意软件在删除之前已经更新了他的网页，但他的托管公司没有发现这些更新。原文中有很多链接。)我可以看到这在包含色情链接的页面底部定义了一个

浏览 1提问于2012-01-09得票数 2

回答已采纳

3回答

Yahoo中的搜索类型链接--如何实现类似行为

、、、

当您在顶部打开时，有一个搜索部分，其中包含以下链接: Web、图像、视频等等我的问题是这是如何实施的？更重要的是

浏览 2提问于2009-06-10得票数 1

回答已采纳

2回答

jquery函数不适用于更改url

、、

我正在研究一些我称之为“标签链接”的东西。有了它，我正试图在一个页面中实现深度链接，在这个网站中，所有内容都是隐藏的，所有内容都与javascript、jquery和php (Wordpress)挂在一起。使用window.location.hash，我可以读取部分url和一个开关语句，我可以启动某些函数来加载以前隐藏的div。如果您导航到<em

浏览 0提问于2015-11-20得票数 0

回答已采纳

1回答

单击Visual Studio上的链接会弹出一个不会消失的窗口

、、、

我在Windows 10上运行了Visual Studio 2012。每当我点击Visual Studio上某个地方的链接时，就会打开一个弹出窗口，上面写着“你想如何打开这个网站？”我仍然可以管理其他应用程序。例如，下面是我在Azure网站的visual studio上点击"View All Setting“链接时遇到的</em

浏览 0提问于2016-10-05得票数 2

1回答

单击其他可见页面链接时Jquery隐藏显示

、、

我在wordpress博客上使用jquery显示隐藏div。链接: 72.52.206.17/ ~guerilla/ spaces /vlog/<-删除额外空格url守则是

浏览 1提问于2011-07-11得票数 0

回答已采纳

1回答

只在单击时将内容加载到div中，并附加

、、、、

底部隐藏的div充满了图像，所以我只希望它们在单击链接时加载，而不是在加载页面时加载。每个隐藏的div都有自己的三个div，目标是三个顶级div，所以当您单击该隐藏div的链接时，隐藏div中的所有三个div都会加载到三个顶部div。我非常肯定，我知道如何使一个链接<

浏览 4提问于2013-10-28得票数 0

1回答

固定菜单下的命名URL位置

、

因此，在单击URL1之后，将加载页面2，并且URL2位于页面的顶部。我尝试过Firefox和Opera，它似乎不依赖于浏览器。

浏览 0提问于2012-09-24得票数 0

回答已采纳

1回答

在多个实例上更改文本onclick

我正在使用javascript来显示/隐藏内容。我在每个内容部分下都有一个链接。当用户单击show链接时，它会显示所有内容。当用户再次单击该链接时，它会隐藏内容。我希望链接文本从显示更改为隐藏，并隐藏以显示在点击。这是我想要做的。我已经设法解决了

浏览 12提问于2018-02-24得票数 2

回答已采纳

1回答

JS:在"unhide“div元素后向下滚动

、、

: block;display: none; div元素现在被隐藏了。现在，我想返回并显示完整的div，并向下滚动到div='x' id='x'中的某个div。所以当我点击back按钮时，首先这个类通过javascript再次变成un

浏览 2提问于2013-03-26得票数 1

回答已采纳

1回答

发出get/post请求以引导modals。多么?

、、、

我有一个非常困难的时间试图提出一个请求，并与来自其他网站的调制解调器沟通。对于普通的html，当你在链接上盘旋时，你可以看到超链接，或者在检查时发现所有关于元素的信息，但是使用modals，似乎所有的代码都隐藏在他们的网站某个地方，这使我无法正确发送http get/

浏览 2提问于2016-12-30得票数 0

1回答

强制数据表列在小屏幕上占据全宽。

、、

背景：我在我的网站上有一个jQuery数据表，我想看看，行动，感觉就像桌面大小的桌子。当它碰到一个小屏幕大小(由Foundation39.9375em定义)时，我想隐藏页眉和页脚(我已经基本计算出来了)，并让第一列占据页面的全部宽度，并将所有其他列强制到子行。其他列只具有按钮/链接，这些按钮/链接会将您带到与行名有关的其他页面。比如设置、状态等

浏览 0提问于2018-07-26得票数 0

回答已采纳

2回答

打开带有链接的jQuery折叠面板(在accordion之外)

、

我有一个用jQuery UI 1.10.1构建的手风琴。这是非常基本的；第一个项目默认显示，其他项目在点击前都是隐藏的。我想使用存在于jQuery折叠面板上方的链接在单击时打开某个折叠面板。它看起来像这样：折叠头部1折叠标题2折叠式Header 3 折叠内容3隐藏</e

浏览 7提问于2013-02-21得票数 2

回答已采纳

1回答

单击导航中的选项时隐藏类

、

基本上，我有一个引导网站，我想在那里张贴新闻和其他内容。我有一个肚脐在顶部，有几个选项是主页，视频，新闻，和有趣。当我点击视频时，我希望它能过滤我在下面发布的内容，只包含有视频类的文章。然后，当我点击News时，它应该交换出来，只显示新闻类文章等等。Home选项应该显示所有内容。下面是HTML： <div id</

浏览 2提问于2014-07-18得票数 1

回答已采纳

1回答

点击后如何切换移动菜单？

、、、

在我的客户网站上，导航链接用于锚滚动和内部页面。当我单击内部页面的链接时，很明显，一旦加载了新页面，菜单就会消失。但是，当我单击锚的链接时，它会滚动到所需的页面部分，但菜单不会切换。这让人困惑，因为似乎什么都没有发生，而且用户无法看到内容，因为菜单正在隐藏它。单击锚链接后，如何切换移动菜单？

浏览 0提问于2018-08-28得票数 0

回答已采纳

2回答

HTML锚点ID不起作用

、

我正在做一个快速的网站，所有的内容都在一个页面上，我使用一个带有锚点链接的小菜单，让最终用户更快地导航到某个部分。我有两个锚点链接可以很好地工作(关于我，我的项目)，但“联系我”链接跳转到“我的项目”部分的随机部分。该网站的预览可在此处获得：我已经检查了ID，它们是对应<e

浏览 0提问于2013-06-18得票数 1

回答已采纳

1回答

常规非图像链接的WordPress相对链接

、

是否有办法在WordPress (不是图像源链接)中以“相对”的方式进行正常链接？？我做自定义网站在WP和网站的某些部分，例如一个图像链接，当点击，导致一个特定的动态构建的WordPress页面，我总是链接他们绝对。例如，如果网站wordpress页面，我想链接到的是page_id=39，而站点是XYZ.com

浏览 3提问于2012-08-29得票数 0

回答已采纳

1回答

常规非图像链接的WordPress相对链接

是否有办法在WordPress (不是图像源链接)中以“相对”的方式进行正常链接？？我做自定义网站在WP和网站的某些部分，例如一个图像链接，当点击，导致一个特定的动态构建的WordPress页面，我总是链接他们绝对。例如，如果我希望链接到的网站wordpress页面是page_id=39，而站点是XYZ.com

浏览 0提问于2012-08-29得票数 0

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

当我在网站的某个部分(id链接)时，如何隐藏其他所有内容？

HTML结构

CSS样式

JavaScript脚本

解释

优势

应用场景

可能遇到的问题及解决方法

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐