javascript - SharePoint 2013 - 使用 jQuery 交换 CSS 文件

Question

在我的 SP 2013 母版页上，我想单击一个按钮并更改样式表的路径。不确定这是路径问题还是什么...但它不会更改样式表。

我的样式表存储在 Style Library/css 文件夹中。

alert($(this).attr('id') + 'clicked'); 告诉我点击功能正在按按钮工作。

母版页上的 JavaScript:

<script type="text/javascript"> 
    $(document).ready(function(){       
        console.log("working...");
        $('#style1').click(function (){
            //alert($(this).attr('id') + ' clicked');
           $('link[href="http://khsp.cloudapp.net/Style Library/css/DT_Override_main_style2"]').attr('href',"http://khsp.cloudapp.net/Style Library/css/DT_Override_main_style1");
        });
        $('#style2').click(function (){
            //alert($(this).attr('id') + ' clicked');
           $('link[href="http://khsp.cloudapp.net/Style Library/css/DT_Override_main_style1"]').attr('href',"http://khsp.cloudapp.net/Style Library/css/DT_Override_main_style2");
        });
    });
</script>

母版页上的 HTML:

<div class="row">
    <div class="col-md-1 col-md-offset-5">
        <button type="button" id="style1" class="btn btn-primary" data-toggle="button">
             <span class="ui-button-text">Style 1</span>
        </button>
        </div>
        <div class="col-md-1 ">
        <button type="button" id="style2" class="btn btn-primary" data-toggle="button">
            <span class="ui-button-text">Style 2</span>
        </button>
    </div>
</div>

谢谢

Answer 1

试试这个 fiddle .在链接标签上使用 ID，但您可能需要对其进行调整，因为 SP 正在我的 VM 上生成从 #styleSheet 到 #ctl00_styleSheet 的客户端 ID。你可以在控制台中看到链接的 href 随着点击次数的变化而变化。