0

私は1つの問題に直面しています。次のようなことをしたいです:

ユーザーがトグルボタンをクリックしたときにEXTERNAL CSSを切り替えたい。

5 つの異なるページがあります。がある：

  1. ヘッダ
  2. フッター
  3. メインページ
  4. お問い合わせ
  5. 私たちに関しては

私は2つの外部スタイルシートを持っています:

  1. スタイル.css
  2. style1.css

デフォルトでは、style.css が読み込まれます。

今、トグルボタンをクリックするstyle1.cssとロードする必要があり、もう一度トグルボタンstyle.cssをクリックするとロードしてビザを取得する必要があります。私はこのようなことをしたいです。

これに関するアイデアを持っている人はいますか。私を助けてください！

CSS はヘッダーに読み込まれるので、トグル ボタンをクリックすると new を適用しますstyle.css。

私が直面している問題は、その時点で他のページをクリックするとデフォルトの css が設定されていることですが、私の場合はそれを望んでいません。ユーザーがボタン style1.css をクリックすると、デフォルトで style.css がロードされます。ユーザーがボタンをもう一度クリックすると、今ロードされます。もう一度クリックすると、style.css がロードされます。style1.css がロードされ、再び style.css がロードされます 貴重なご回答ありがとうございます。より正確な回答をお待ちください –</p>

4

5 に答える 5

2

このようなことをすることによって：

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

jQuery でスタイルシートを動的に適用するを参照してください。

デモ

于 2012-09-05T05:42:17.617 に答える
1

スタイルシート スイッチャー 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>
于 2012-09-05T06:26:23.447 に答える
0

ユーザーが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>
于 2012-09-05T06:04:22.077 に答える
0

これを試して

$("#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);
}
于 2012-09-05T05:57:35.450 に答える
0 
$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 } ?>
于 2012-09-11T09:01:20.160 に答える