0

我正在尝试使用单击功能切换 CSS 文件。尝试了很多但没有收获:( style2.css 没有得到应用

<script type="text/javascript">
    $(document).ready(function(){
    $("#nav li a").click(function() { 
         $("link").attr("href",$(this).attr('rel'));
        });     
    });  
</script>

<body>
    <ul id="nav">
       <li class="original"><a href="#" rel="css/style1.css">Original CSS</a></li>
       <li class="original"><a href="#" rel="css/style2.css">Larger Text</a></li>
    </ul>
</body>
4

2 回答 2

4

更好的技术是向 BODY 标签添加一个类，并允许 CSS 从那里继承新大小的文本，而不是交换样式表。

body {
    font-size:12px;
}

body.big {
    font-size:18px;
}
于 2013-08-19T19:59:07.690 回答
0

尝试这个：

<!DOCTYPE html>
<html lang=en-CA>
<head>
    <meta charset=utf-8>
    <title>Test</title>
    <link id='mainStylesheet' href='css/styles1.css' type='text/css' rel='stylesheet'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $('nav a[href]').click(function(e){
            e.preventDefault();
            $('#mainStylesheet').prop('href', $(this).prop('href'));
        });
    });
    </script>
</head>

<nav>
    <ul>
        <li><a href='css/styles1.css'>Original</a></li>
        <li><a href='css/styles2.css'>Bigger</a></li>
    </ul>
</nav>

请注意，我为link元素提供了一个 ID，以便专门更改其href属性。

于 2013-08-19T20:00:31.017 回答