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

Chrome上的选择框不起作用

1 个答案: