css風格切換器引導

我想按照https://www.inetsolution.com/blog/march-2010/css-style-switcher-a-quick-and-dirty-how-to實現風格切換器。，但只要我添加一個標題=「」的CSS鏈接，CSS文件將不會加載在頁面上的樣式回落到默認引導。我的外部CSS文件添加在正文的底部。訂單是：css風格切換器引導

<link rel="stylesheet" href="css/bootstrap.min.css"> 
    <style> 
     body { 
      padding-top: 50px; 
      padding-bottom: 0px; 
     } 
    </style> 
<link rel="stylesheet" href="css/bootstrap-theme.min.css"> 
<link rel="stylesheet" href="css/my-styles.css"> 
<link rel="stylesheet" href="css/my-alternate-styles.css"> 
<link rel="stylesheet" href="fontello-xxxxxxxx/css/fontello.css">

有沒有我想念的東西？

來源

2016-12-18 pigsound

你會得到什麼錯誤？你能提供一些jsfiddle嗎？ – lomboboo

不知道如果我正確地做了我的第一個小提琴，所以你可以從中得到相關信息...看到這裏：https://jsfiddle.net/pigsound/em37bdjj/11/ – pigsound

@pigsound看到我的答案，我很熟悉這個特定的代碼。 – zer00ne

你可能做的一切都是正確的（除了一件事以外，請參閱下面的*），本文中的代碼在使用直引號時使用了引號「'」「。

<a href=」#」 onclick=」setActiveStyleSheet(‘default’); return false;」>Change style to default</a> 
<a href=」#」 onclick=」setActiveStyleSheet(‘alternate’); return false;」>Change style to alternate</a>

所以，如果你複製並粘貼這個部分，它不會被正確解析。這與直引號的正確方法：

<a href="#" onclick="setActiveStyleSheet('default'); return false;">Change style to default</a> 
<a href="#" onclick="setActiveStyleSheet('alternate'); return false;">Change style to alternate</a>

回顧這PLUNKER，而不是片段。由於涉及多個樣式表，代碼片段將不起作用。

SNIPPET（沒有功能，回顧PLUNKER代替）

<!doctype html> 
 
<html> 
 
    <head> 
 
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'> 
 
<link href='default.css' title='default' rel='stylesheet'> 
 
<link href='alt.css' title='alt' rel='alternate stylesheet'> 
 
     <style> 
 
     body { 
 
      padding-top: 50px; 
 
      padding-bottom: 0px; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <section> 
 
     <p>TEST</p> 
 
     </section> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script> 
 
    <script src='styleSwitcher.js'></script> 
 
    </body> 
 
    </html>

*我注意到你說：

...我的外部CSS文件被添加在底部的身體...

您應該始終將<link> s置於<head>之內。大多數情況下，JavaScript/jQuery需要在可以執行任何操作之前加載實際的DOM。因此，在大多數情況下，確保您的造型（<link>和<style>）首先在<head>之內。

對於<script>，最好將它們放在結束標記</body>之前<body>的底部。例如<link>，<style>和<script>佈局，請參閱摘錄和PLUNKER。

來源

2016-12-18 18:26:52 zer00ne

所以你的意思是有太多的樣式表涉及我的HTML代碼？當我重新加載頁面，1秒正確的CSS是可見的，但然後它似乎關閉和默認的CSS顯示。我試圖把所有的CSS放在頭上，但錯誤仍然出現 - 只要css-link獲得title =「」，它就不會被識別。當css包含在頭部而不是身體底部時，它會直接顯示默認引導程序css，而不會顯示自定義css甚至不到1秒。我回顧了你所添加的榨汁機。它似乎工作在鉻，但不是在Firefox。 – pigsound

我在PC上使用Chrome，Firefox和Edge進行了測試。在Mac上，我在Chrome，Firefox和Safari上進行了測試。沒有問題。你在使用WordPress，Drupal，Joomla或其他CMS嗎？通常的做法是將所有樣式放在頭部，特別是鏈接，所以不，我不是說你有太多的樣式表。 http://stackoverflow.com/a/18449119/2813224 – zer00ne

對不起，我是非正式的：我打開你的電腦在Firefox和鉻，並看到在Firefox中沒有工作。感謝您的幫助和建議，我會繼續嘗試。 – pigsound

css風格切換器引導

回答

相關問題