Comment basculer CSS externe sur le bouton clic

Je suis face à un problème, je veux faire quelque chose comme ceci:Comment basculer CSS externe sur le bouton clic

Je veux basculer le CSS externe lorsque l'utilisateur est cliquer sur le bouton à bascule.

il y a 5 pages diff y sont

tête
Pied de page
Page principale
Contactez-nous
A propos de nous

et j'ai 2 feuille de style externe :

style.css
style1.css

Par style.css par défaut est chargé.

Maintenant, quand je clique sur le bouton bascule puis style1.css doivent charger, et quand encore une fois cliquez sur le bouton à bascule style.css pour charger et visa verset. Je veux faire quelque chose comme ça.

Y a-t-il quelqu'un qui a une idée à ce sujet? Sil te plait aide moi!

Merci d'avance.

CSS est chargé sur l'en-tête, donc quand je clique sur le bouton bascule je veux appliquer style.css nouveau. Le problème auquel je suis confronté est que lorsque je clique sur une autre page à ce moment-là, le CSS par défaut est défini mais dans mon cas je ne veux pas que Par défaut, style.css est chargé maintenant lorsque l'utilisateur clique sur le bouton style1.css est chargé maintenant lorsque l'utilisateur clique à nouveau sur le bouton style.css est chargé lorsque vous cliquez à nouveau style1.css chargé et encore style.css chargé je veux faire quelque chose comme ça et que les changements devraient être là pour l'ensemble du site de la main! thnx pour votre réponse précieuse et attendre plus précis -

Source

2012-09-05 drsndodiya

Avez-vous essayé ma réponse? –

En faisant quelque chose comme ceci:

$("a").click(function() { 
    $('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />'); 
});

Voir Applying stylesheets dynamically with jQuery

DEMO

Source

2012-09-05 05:42:17

Bonjour Tout ce que je suis essayé tout votre code, mais le problème que je suis confronté est que lorsque je clique sur une autre page à ce moment le CSS par défaut est défini mais dans mon cas je ne veux pas Par défaut style.css est chargé maintenant lorsque l'utilisateur cliquez sur le bouton style1.css est chargé maintenant lorsque l'utilisateur cliquez à nouveau sur le bouton style.css est chargé lorsque vous cliquez à nouveau style1.css chargé et encore style.css chargé je veux faire quelque chose comme ça et ce changement devrait être là pour l'ensemble du site de la main! merci pour votre réponse précieuse et attendez plus précis – drsndodiya

essayer cette

$("#btntoggle").click(function(){ 
      if($("LINK[href*='style.css']").lenght() > 0){ 
       $("LINK[href*='style.css']").remove(); 
       addCss(path + "style1.css"); 
      }else{ 
       $("LINK[href*='style1.css']").remove(); 
       addCss(path + "style.css"); 
     } 
}); 


function addCss(path){ 
    var headID = $("head").get(0);  
    var newCss = document.createElement('LINK'); 
    newCss.rel = 'StyleSheet'; 
    newCss.type = 'text/css'; 
    newCss.href= path; 
    newCss.media = 'screen'; 
    headID.appendChild(newCss); 
}

Source

2012-09-05 05:57:35 gaurang171

Notez que J'ai ajouté la feuille de style par défaut dans le balisage , dans le cas où l'utilisateur a désactivé JS. Donc, vous obtenez une sorte de repli.

<!DOCTYPE html> 
<html> 
    <head>  
     <link rel="stylesheet" href="style1.css"> 
     <script type="text/javascript" src="../jquery-1.8.0.min.js"></script> 
     <script> 
      $(function(){ 
       $("#change").click(function(){      
         $('head link').each(function(){ 
          if($(this).attr('rel') == "stylesheet"){ 
           if($(this).attr('href') == "style1.css"){ 
            $(this).attr("href","style2.css"); 
           } else { 
            $(this).attr("href","style1.css"); 
           } 
          } 
         }); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <button id="change">Change</button> 
    </body> 
</html>

Source

2012-09-05 06:04:22

Voir Stylesheet Switcher jQuery

<script src="script/jquery-1.6.2.min.js" type="text/javascript"></script> 
    <script src="jquery.cookie.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     if ($.cookie("css")) { 
      $("link").attr("href", $.cookie("css")); 
     } 
     $(document).ready(function() { 
      $("#nav li a").click(function() { 
       $("link").attr("href", $(this).attr('rel')); 
       $.cookie("css", $(this).attr('rel'), { expires: 365, path: '/' }); 
       return false; 
      }); 
     }); 
    </script> 
    <ul id="nav"> 
     <li><a href="#" rel="css/metro.blue.css">Original CSS</a></li> 
     <li><a href="#" rel="css/metro.green.css">Larger Text</a></li> 
     <li><a href="#" rel="css/metro.red.css">Something Different</a></li> 
    </ul>

Source

2012-09-05 06:26:23 Sender

$url = Mage::helper("core/url")->getCurrentUrl(); // $url contain your current url 

if(!isset($_SESSION['cssfile']) and !isset($_GET['l'])) 
{ 
    /*$urlArr = explode("?",$url); 
    $tmpUrl = $urlArr[0]; 
    $tmpUrl .= "?"; 
    $andP = ''; 
    $i=1; 
    for(;$i<count($urlArr);$i++) 
    { 
     $tmpUrl .= $andP.$urlArr[$i]; 
     $andP = '&'; 
    } 
    if($i>1) 
     $tmpUrl .= '&l=1'; 
    else 
     $tmpUrl .= 'l=1';*/ 
    //$urlGet = $tmpUrl;//$url."?l=0"; 
    $_SESSION['cssfile'] = '1'; 
} 

if(isset($_GET['l']) and $_GET['l']==0) 
{ 
//  $urlGet = $url."?l=1"; 
    $_SESSION['cssfile'] = '0'; 
} 
else if(isset($_GET['l']) and $_GET['l']==1) 
{ 
//  $urlGet = $url."?l=1"; 
    $_SESSION['cssfile'] = '1'; 
} 

if(isset($_SESSION['cssfile'])) 
{ 
    $urlArr = explode("?",$url); 
    $tmpUrl = $urlArr[0]; 
    $tmpUrl .= "?"; 
    $andP = ''; 
    $found = 0; 
    //for($i=1;$i<count($urlArr);$i++) 
    foreach($_GET as $key => $val) 
    { 
     if($key == 'l') 
     { 
      $found = 1; 
      if($val == 1) 
       $val = 0; 
      else 
       $val = 1; 
     } 
     $tmpUrl .= $andP.$key.'='.$val; 
     $andP = '&'; 
    } 
    if($found == 0 && count($_GET)>0) 
     if($_SESSION['cssfile'] ==1) 
      $tmpUrl .= '&l=0'; 
     else 
      $tmpUrl .= '&l=1'; 
    else if($found == 0 && count($_GET)==0) 
     if($_SESSION['cssfile'] ==1) 
      $tmpUrl .= 'l=0'; 
     else 
      $tmpUrl .= 'l=1'; 
    $urlGet = $tmpUrl; 
} 

/*if(isset($_SESSION['cssfile']) and $_SESSION['cssfile'] == 'styles1.css') 
{ 
    $_SESSION['cssfile'] = 'styles.css'; 
    $_SESSION['cssfile'] 

} 
else 
{ 
    $_SESSION['cssfile'] = 'styles1.css'; 
}*/ 
//echo '--'.$_SESSION['cssfile']; 
if($_SESSION['cssfile'] ==1){ 
?> 
<link href="<?php echo $this->getSkinUrl()?>css/styles1.css" rel="stylesheet" type="text/css" id="style" /> 
<?php }else{ ?> 
    <link href="<?php echo $this->getSkinUrl()?>css/styles.css" rel="stylesheet" type="text/css" id="style"  /> 
    <?php } ?>

Source

2012-09-11 09:01:20 drsndodiya

Comment basculer CSS externe sur le bouton clic

Répondre

Questions connexes