CSS の競合の問題が発生しています。詳細は次のとおりです。
製品がグリッド形式で表示される検索結果ページがあります。そのグリッド検索結果のCSSは、ページのヘッダーに含まれる「product-grid.css」です。このページには、クリックすると検索結果がリスト形式で表示されるボタンがあります。リスト形式のcssは、ページのheadタグにも入っている「product-list.css」です。
HTML 担当者は、product-grid.css と product-list.css の両方でクラスの名前を同じにしました。
私が望むのは、ページをグリッド スタイルで表示しているときに、product-grid.css のみがページのそれぞれの部分に適用されることです。リスト形式でページを表示している場合、product-grid.css を無効にし、product-list.css をページ全体に適用する必要があります。
jquery を使用して css ファイルを有効または無効にしようとしましたが、何か間違っている可能性があります。また、ページが読み込まれると、両方の css ファイルが head タグでアクティブになり、クラス名の競合により、他のビューに移動しなくてもページの形式が正しくありません。
どうすればいいですか？