URLのハッシュ部分を条件にCSSの出し分けをしたい

Question

前提・実現したいこと

初心者です。
URLのハッシュ部分を条件に、CSSを出し分けしたいです。
https://example.com/abcでは、a.cssを出して、https://example.com/abc#exampleではb.cssを出したいです。

発生している問題・試したこと

以下のサイトのデモコードを元にJavaScriptのコードを作ってheadタグ内でこのJavaScriptを読み込むようにしましたが、表示は変わりませんでした。
https://www.tam-tam.co.jp/tipsnote/javascript/post9911.html

$(function (){
  var Hash = location.hash;
  
    if (Hash == '#example') {
      $('.hash').append('<link href="https://example.com/b.css" rel="stylesheet" type="text/css" />');
    } else {
      $('.hash').append('<link href="https://example.com/a.css" rel="stylesheet" type="text/css" />');
    }
});

HTML部分についてはHEADタグ内で以下のように入力しています。

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
  <script src="https://example.com/example.js"></script>

ご教授いただければ幸いです。
よろしくお願いいたします。

---

解決方法追記

みなさま回答ありがとうございました。
JavaScriptでclassを置き換える形で目的の動作をいたしました。

$(function (){
  var Hash = location.hash;
  var element = document.getElementById ('example');
  
    if (Hash == '#example') {
      element.classList.replace('a', 'b');
    }
});

Comments

[Lhankor_Mhy]

ご提示のコードを試してみましたが、当方の環境では問題なく動作しました。

Answer 1

あまり良い方法だとは思えません、hashはページ内リンクでかわるものですから
それで呼び出すものを返るのはバグの温床になりかねません
普通に同じものを呼び出して、ハッシュでクラスを付け替えるとかのほうが
良いと思います

Comments

[n..]

クラスで出し分けをしたいほうがいいんですね。
回答ありがとうございます！
その方法で試します！

[n..]

教えていただいた方法で目的の動作いたしました。ありがとうございました！

Answer 2

$('.hash').appendの前後にalertなどを書いておくとわかりやすいかもしれません。

URLのハッシュが変わるだけだとページの再読み込みが行われないので、CSSを出し分ける処理も（$(function () {})の中に書かれているため）実行されません。

以下のようにhashchangeのイベントでもCSSを書き換えるようにするとうまくいくかもしれません。

$(window).on("DOMContentLoaded hashchange", (event) => {
  var Hash = location.hash;

  if (Hash == '#example') {
    $('.hash').append('<link href="https://example.com/b.css" rel="stylesheet" type="text/css" />');
  } else {
    $('.hash').append('<link href="https://example.com/a.css" rel="stylesheet" type="text/css" />');
  }
});

ただこのままだとイベントが発生するたびにlinkタグが増えていきますのでさらに少し工夫が必要になると思います。

Answer 3

DOMContentLoaded の発生前に操作可能なAPIを覚えましょう。

• location.href
• document.head
• HEAD 直下に配備する 各要素のDOM操作
• etc ..

// https://example.com/example.js
// 他サイトからの landing の条件で CSS を変える
let
  href = location.hash == "#example"
    ? "https://example.com/b.css"
    : "https://example.com/a.css" // typo 修正
  ;

// 実行中のscript の前に link[rel="stylesheet"] を置く
document.head.insertBefore(
  Object.assign(document.createElement("link"),
    {
      rel:"stylesheet",
      type:"text/css",
      href
    }), document.currentScript );

jQuery の$(function (){ /* js-code */ })() は DOMContentLoaded 発生まで実行されません。
また、jQuery を読み込む暇があったら、スタイルシートの読み込みを開始させるべきです。

<script src="https://example.com/example.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

Answer 4

見落としがなければそのまま動作しそうな気がします。
「表示が変わらない」というのはb.cssが適用されないということですよね？
だとしたら$('.hash')がないのだと思います。
HTMLそのものは質問中にないためあくまで推測ですが、hashというクラス名の要素を記載していないのではないでしょうか？

※もしa.cssもb.cssも適用されないのならcssのappendの方法が異なる可能性があります。

Comments

[n..]

$('.hash')の部分はデモコードの中身を書き換えただけでしたので、意識しておりませんでしたが、読み込み自体が問題ないのであれば、cssの適用方法が違いそうですね。
回答ありがとうございます！