javascript - 页面 URL 更改时 CSS 不生效

标签 javascript html css

我有一些共享通用 CSS 文件的 HTML 页面。我将它们放在页眉中并将它们导入页面中。一切都很好,但是,我必须返回带有 ID 的页面,这是行不通的。

我有一个页面 detail.html,但是当我返回一个 detail/id 时,它只是不收费。它不可能是 href 错误,因为在其他页面正在收费。我想我必须改变一些东西以便它适用于所有地方?

<!DOCTYPE html>
<html lang="es"> 
<head>

    <title>Historiales Médicos</title>

    <!-- Meta -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Página home">
    <meta name="author" content="Lucas Mazariegos">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">


    <!-- Favicon -->
    <link rel="icon" href="img/favicon2.png" type="image/png">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

    <!-- CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/estilo.css" type="text/css"> 
</head>

我得到的 URL:detail/1_S0004-06142005000900012-1。 HTML 收费但 CSS 不收费。

最佳答案

我认为您的问题是您的 CSS 文件 href="css/estilo.css" 位于相对于页面 URL 的位置。

如果页面 URL 是 http://example.com/detail,则 CSS 文件位于网站的根目录中。然后,当 URL 更改为 http://example.com/detail/id 时,引用 css/estilo.css 应该位于目录位置 /细节/id/estilo.css.

我建议您将所有全局 CSS 放在名为“css”的根目录中,然后您的 href 将变为 href=/css/estilo.css,它不会随着页面发生变化。

您应该对所有静态/常见图像和 JavaScript 文件执行相同的操作。

通常图像进入 /img 目录,JavaScript 文件进入 /js 目录。

如果 CSS 文件已经在网站的 /css/ 目录下,那么您需要将相对引用 css/estilo.css 转换为绝对引用/css/estilo.css 并对所有 CSS 文件执行此操作。

将您的 HTML 更改为:

<!-- CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/css/estilo.css" type="text/css"> 

关于javascript - 页面 URL 更改时 CSS 不生效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59653620/

相关文章:

html - 内联 &lt;input&gt; 和 <div> 未垂直对齐,但高度相同

javascript - 严格模式下不允许使用八进制文字

javascript - 在多选表单上,如果未选择任何选项,则在提交时选择所有选项

javascript - WinRT - StreamSocket - 通过 LoadAsync 读取数据时关闭连接

javascript - 如何根据 firebase cli 别名分离部署构建

javascript - 我们如何从 kml 文件直接调用 javascript 函数

html - 调整屏幕大小时生成空白

html - 两个 CSS 类 : Which one Wins?

html - CSS3如何扩展高度为: auto for a few pixels的图像

javascript - 在 express 中加载 css 和 js 时遇到 500 内部服务器错误