如何使用 jquery 避免 CSS 冲突？答案

【问题标题】：How to avoid CSS conflict using jquery?如何使用 jquery 避免 CSS 冲突？
【发布时间】：2013-10-28 18:01:21
【问题描述】：

我遇到了 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 标记中处于活动状态，并且由于类名称冲突，即使没有切换到其他视图，页面也会出现格式错误。

任何帮助我该怎么办？

【问题讨论】：

【解决方案1】：

这是我的解决方案：

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

workarounds 和 abracadabras 加载 CSS 文件只是因为有些人懒得分开页面的重要部分简直是愚蠢，恕我直言。

【讨论】：

【解决方案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">');

【讨论】：