为什么当我从index.html转到index.html/#contact时，我的CSS消失了？
当你从index.html转到index.html/#contact时，你的CSS消失了，这是因为/#contact是一个锚点（anchor），它会导致浏览器将页面滚动到相应的位置，但不会触发页面的重新加载。由于CSS是在页面加载时被引入的，当页面滚动到锚点时，并不会重新加载CSS文件，因此导致CSS样式丢失。
要解决这个问题，你可以使用JavaScript来监听页面滚动事件，并在滚动到锚点时手动加载CSS文件。以下是一个示例代码：
window.addEventListener('scroll', function() {
if (window.location.hash === '#contact') {
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'path/to/your/css/file.css';
document.head.appendChild(link);
}
});上述代码会在页面滚动时检查当前URL的哈希部分是否为"#contact"，如果是，则动态创建一个<link>元素，并将CSS文件的路径设置为其href属性值，然后将<link>元素添加到<head>标签中，从而加载CSS文件。
另外，你也可以考虑将CSS样式直接嵌入到index.html文件中，而不是通过外部CSS文件引入。这样无论页面滚动到哪个位置，CSS样式都会一直存在。
请注意，以上代码仅为示例，实际应用中你需要根据自己的项目结构和需求进行相应的调整。
推荐的腾讯云相关产品：腾讯云CDN（内容分发网络），详情请参考：https://cloud.tencent.com/product/cdn
相关·内容
我正在尝试创建一个链接，该链接将出现在我的HTML文件中的contact部分。例如，当我在abc.html中点击以下内容时： <a href="index.html/#contact>Go to contact</a> 它将我重定向到这里： <div id="contact"><h1>Conta
浏览 10提问于2020-08-08得票数 0
回答已采纳
1回答
更改Bootstrap 4.5的文件名示例
css、bootstrap-4
我希望在Bootstrap 4.5中使用其中一个示例，但每当我更改示例的html文件或css文件的文件名时，它都会断开示例页面的格式化链接。如何在不更改页面本身的情况下复制原始示例文件并更改名称(例如，更改为类似"my_page.html“或"my_page.css”的名称)？
浏览 0提问于2020-08-01得票数 0
1回答
在GAE上托管一个包含一些php文件的静态网站
php、html、google-app-engine、filepath、app.yaml
我在谷歌应用程序引擎上托管了一个基本上是静态的网站，似乎在设置app.yaml时遇到了一些问题。要么是这样，要么是我的文件路径关闭了。我看过其他帖子，其中混合静态和动态内容似乎有一些麻烦，所以我决定这样设置我的文件： app.yaml -index.html
浏览 33提问于2018-06-09得票数 0
回答已采纳
1回答
Spring bootstrap未加载
html、css、spring
我将一些引导程序模板粘贴到我的resources/templates文件夹中，当我启动服务器并转到index.html页面映射到的url时，页面加载了，但是引导程序丢失了。当我使用IntelliJ中出现的chrome按钮来查看您的html时，它工作正常，引导程序加载，一切正常。示例：
在我的index.html
浏览 0提问于2019-03-12得票数 0
2回答
角-cli项目不能在SharePoint中加载
angular、sharepoint、sharepoint-2013、angular-cli、sharepoint-online
我已经构建了一个具有角4.3.3和CLIVersion1.2.7的应用程序，可以在SharePoint中运行。此应用程序依赖于图标的FontAwesome。运行ng serve时，显示FontAwesome图标没有问题。但是，当为生产环境构建时，不会显示它们。
棱角应用程序是客户可以安装的产品的一部分。它们都有自己的SharePoint环境。我能够加载这些文件，所以我的应用程序可以为每个客户工作，但正如我已经说过的，
浏览 3提问于2017-08-11得票数 1
回答已采纳
3回答
CSS是如何在没有文件的情况下应用的？
html、css、flask
我不知道我的烧瓶应用程序是怎么回事。我的项目很好，按照我想要的方式工作，然后我的style.css中的CSS随机停止应用到我正在添加的新元素。经过一番深入研究，我发现我的index.html文件本身就是如何应用CSS的，而不是更新的，所以我
浏览 3提问于2021-05-18得票数 0
回答已采纳
2回答
Python找不到CSS文件
python、html、css
嗨，我是刚开始使用python的网页程序，我正在尝试做一个基本的网站，使用CSS样式表。我有三个文件: app.py、index.html和style.css。它们都在同一个目录中。当我运行app.py并转到localhost:8080时，它会显示"Hello！“，但是它没有style.css文件的样式，我的终端上写着
浏览 9提问于2015-02-06得票数 0
回答已采纳
3回答
HTML ul元素未正确居中
html、html-lists、center
仍然是HTML的新手，如果这是一个非常简单的问题，很抱歉……以下是该问题在浏览器中的图像-
这是我的HTML。/css/aboutcss.css" type="text/css" rel="stylesheet"
浏览 0提问于2012-12-11得票数 2
回答已采纳
2回答
当我尝试悬停时，导航下拉菜单一直在消失。
html、css、navigation
基本上，我做了一个非常好的肚脐，但是我做的下拉列表不工作，它显示在我的社区标签上，但是当我试图在上面悬停时，它就消失了：<div class="navigation">
浏览 3提问于2013-12-05得票数 0
回答已采纳
3回答
Webpack -使用CopyWebpackPlugin将文件从源复制到公开
webpack、copy
我有一个应用程序，我正在使用Webpack。在这个应用程序中，我需要将一些静态.html文件从source目录中的不同目录复制到public目录中的相同层次结构中。为了做到这一点，我使用了。/public', force:true } ], )};
当我从命令行运行webpack时，一切都按我的意愿工
浏览 3提问于2017-07-11得票数 21
回答已采纳
7回答
在R中安装软件包dplyr时出错。install.packages中的错误:需要TRUE/FALSE的位置缺少值
r、rstudio、install.packages
我尝试安装dplyr包，但总是显示错误：以下是控制台历史记录：
>
浏览 0提问于2016-08-15得票数 3
2回答
SockJS多路复用示例404找不到index.html
node.js、sockjs
看着当我尝试浏览到index.hmtl http://127.0.0.1:9999/index.html时，我得到了404消息"Cannot GET /index.html
浏览 19提问于2013-04-06得票数 1
回答已采纳
4回答
HTML -了解href以及link和base标记
html、hyperlink、directory、base
我经常混淆href属性、link标记和base标记。我不确定如何正确地链接CSS文件，以便文件可以移动到子文件夹中并仍然有效(后面的例子)，所以我继续了解了在指定位置时href是如何工作的。/test/index.html，其中有4个用于测试的链接。/
在/aeac/文件夹中，我有index.html。当我不得不创建子文件夹时，问题就出现了<
浏览 0提问于2010-10-12得票数 1
回答已采纳
4回答
HTML - Script -在转到domain.com/example时隐藏"/index.html“文件
javascript、html、.htaccess、redirect
例如:在appples网站上，当转到apple.com/support时，我会转到apple.com/support/，它应该是apple.com/support/index.html，但是index.html例如，当我访问jonathangurebo.se/ www.jonathangurebo.se时，我会访问jonathangurebo.se/contact/
浏览 0提问于2013-03-08得票数 1
1回答
Nginx:发布服务静态资产(js、css等)多地点
nginx、nginx-config、nginx-location
为了演示的目的，我有一个非常基本的应用程序设置。它由两个项目、app01和app02组成，这两个文件夹都位于应用程序文件夹中。apps│ ├── index.html│ └── subpage└── app02├── index.html真正的化名有效。当我
浏览 8提问于2021-12-07得票数 1
1回答
如何在不使用任何框架的情况下访问以另一种方式保存为nodejs的表单中提交的数据？
html、node.js、forms、post
我是Node.JS新手，我试图用Node.JS将提交的数据以html文件的形式显示出来。我怎么做呢？我不想使用任何框架，因为我想让我的基础更强大。<!input type="submit" name="submit"></p>
</fie
浏览 1提问于2018-06-22得票数 1
3回答
我对两个页面(index.html和contact.html)使用相同的样式表。所有样式都已应用于index.html。现在，我已经将相同的代码复制并粘贴到contact.html中，但发现我尝试使用的新的CSS样式将不适用于此页面。style.css工作表的路径文件未更改。我不明白的是为什么
浏览 2提问于2017-05-02得票数 1
2回答
如何重新加载有角度的单页子页，并且不丢失内容
angularjs、spring、spring-mvc、spring-boot
我想要做的是从我的url中删除散列#，我想这样做：
$locationProvider.html5Mode中消失之后，但是！我打开我的网页比点击链接到例如"/contact“和转到子页面URL看起来完美的没有散列
浏览 5提问于2016-08-10得票数 0
4回答
电子应用程序找不到包中包含的CSS/JS
node.js、gulp、electron
我有一个HTML5网络应用程序，我正在通过电子打包。我是通过吞食电子包装的。
我遇到的问题是，当构建应用程序并运行它时，index.html文件中引用的CSS或JS文件都不会被加载。我可以看到这些资产包含在构建中，并且是Myapp.app/Contents/Resources/ .app /文件夹中应用程序捆绑包的一部分。事实上，如果
浏览 0提问于2016-03-09得票数 11
1回答
正在搜索已注册的设备...(云端点入门模板)
android、google-app-engine、database-connection、google-cloud-endpoints
我是一名.NET开发人员，也是安卓的新手。我已经成功地编写了一个利用SQLite进行数据存储的安卓应用程序。现在，我想将应用程序连接到Google Cloud后端。我按照这个创建了一个应用程序引擎连接的安卓项目。我正在使用三星的Note2进行测试。在设备上，它成功地注册了GCM和Endpoints，但当我访问网站http//localhost:8888/进行测试
浏览 1提问于2013-05-03得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
