2

我遇到了 CSS 冲突问题。以下是详细信息：

我有一个搜索结果页面，其中产品以网格格式显示。网格搜索结果的 CSS 是“product-grid.css”，它包含在页面的标题中。在此页面上，我有一个按钮，单击该按钮以列表格式显示搜索结果。列表格式的 css 是“product-list.css”，它也包含在页面的 head 标记中。

现在 HTML 专家已经让 product-grid.css 和 product-list.css 中的类名称相同。

我想要的是，当我以网格样式查看页面时，只有 product-grid.css 应该应用于页面的各个部分。当我以列表格式查看页面时，应该禁用 product-grid.css 并且 product-list.css 应该应用于整个页面。

我尝试使用 jquery 启用和禁用 css 文件，但可能是我做错了什么。此外，当页面加载时，两个 css 文件都在 head 标记中处于活动状态，并且由于类名称冲突，即使没有切换到其他视图，页面也会出现格式错误。

任何帮助我该怎么办？

4

2 回答 2

4

这是我的解决方案：

HTML 人应该更改类名。目前的做法是不能接受的。

仅仅因为有些人懒得分离页面的重要部分，就在加载 CSS 文件时做变通方法和abracadabras简直是愚蠢的，恕我直言。

于 2013-10-28T09:51:12.650 回答
2

创建一个变量，该变量决定页面以网格样式或列表样式查看的条件。在该变量的基础上使用下面的代码。

根据您的情况，您需要验证页面是否以网格样式查看，然后添加网格 css

$('head').append('<link rel="stylesheet" type="text/css" href="product-grid.css.css">');

别的

$('head').append('<link rel="stylesheet" type="text/css" href="product-list.css">');

参考：我可以根据要求加载外部样式表吗？

于 2013-10-28T09:51:46.107 回答