jquery - chrome上的选择框不起作用

Question

我制作了一个样式选择器，将站点从盒装更改为宽，从宽更改为盒装。它适用于所有浏览器，但不适用于 Chrome。当我从选择框中单击选项时，没有任何反应。

这是 HTML 的一部分：

    <link rel="stylesheet" type="text/css" href="css/boxed.css" id="layout">

   <select>
        <option class="boxed">Boxed</option>
        <option class="wide">Wide</option>
    </select>

JavaScript：

    // Layout Changer
    $(".wide" ).click(function(){
        $("#layout" ).attr("href", "css/wide.css" );
        return false;
    });

    $(".boxed" ).click(function(){
        $("#layout" ).attr("href", "css/boxed.css" );
        return false;
    });

干杯!

Answer 1

你的问题不是id标签。这是click处理程序。尝试这个：

JavaScript：

$(function() { 
    $("#style_switcher").on('change', function() {
        $('#layout').attr('href', $(this).val() + '.css');
    });
});

HTML：

<link id="layout" rel="stylesheet" type="text/css" href="wide.css">

<select id="style_switcher">
    <option value="wide">Wide</option>
    <option value="boxed">Boxed</option>
</select>

您还可以查看此插件并让自己轻松使用：http: //www.kelvinluck.com/assets/jquery/styleswitch/toggle.html