Question

我面临一个问题，我想做这样的事情：

我想在用户点击切换按钮时切换EXTERNAL CSS。

有5个差异页面

标题
页脚
主页
联系我们
关于我们

我有2个外部样式表：

的style.css
style1.css

默认情况下会加载style.css。

现在，当我点击切换按钮时，必须加载style1.css，然后再次点击切换按钮style.css必须加载和签证。我想做这样的事情。

有没有人对此有所了解。请帮帮我！

提前致谢。

CSS加载在标题上，所以当我点击切换按钮时，我想应用新的style.css。

我面临的问题是，当我点击任何其他页面时，默认css已设置但在我的情况下我不想要默认情况下，当用户点击按钮style1时，会加载style.css .css加载现在当用户再次点击按钮style.css加载时再次点击style1.css加载并再次加载style.css我想做这样的事情，这个改变应该是整个网站的主要！ thnx用于您的宝贵回复并等待更准确 -

Answer 1

做这样的事情：

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

请参阅Applying stylesheets dynamically with jQuery

DEMO

Answer 2

请参阅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>

Answer 3

试试这个

$("#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);
}

Answer 4

请注意，我已在标记中添加了默认样式表，以防用户禁用JS。所以你得到某种后备。

<!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>

Answer 5

$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 } ?>

如何在按钮单击时切换外部CSS

5 个答案: