菜单的CSS主体切换器

Question

我需要帮助。我更改了body标签类：

<body class="front">
<select class="style-change">
<option value="green">Green</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
 </select>


<script>
$('.style-change').change(function(){
    $('body').removeClass();
    $('body').addClass($(this).val());
});

</script>

但是我需要更改，然后单击菜单-更改主体样式和其他菜单元素。...然后单击菜单，我要更改菜单以及主体的“前”类为红色绿色或蓝色

Answer 1

首先从body标签中删除所有课程，然后再应用新课程。

<script>
$('.style-change').change(function(){
    $('body').removeAttr('class');
    $('body').attr('class', $('.style-change option:selected').val());
});
</script>

Answer 2

尝试：

$('.style-change').change(function(){
    var color = $('option:selected',this).val();
    $('body').removeClass().addClass(color);
});

Answer 3

$('select.style-change').change(function() {
    var selectedColor = $(this).find('option:selected').val();
    $('body').removeClass().addClass(selectedColor);
});

Answer 4

您需要将jQuery脚本包含在document.ready中：

$(function() {
     $('.style-change').change(function(){
    $('body').removeClass();
    $('body').addClass($(this).val());
});

  });

演示

菜单的CSS主体切换器

问题描述

4 个解决方案

解决方案1
0 2013-09-05 09:52:09

解决方案2
0 2013-09-05 09:54:07

解决方案3
0 2013-09-05 09:58:29

解决方案4
0 2013-09-05 10:10:01

菜单的CSS主体切换器

问题描述

4 个解决方案

解决方案1 0 2013-09-05 09:52:09

解决方案2 0 2013-09-05 09:54:07

解决方案3 0 2013-09-05 09:58:29

解决方案4 0 2013-09-05 10:10:01

解决方案1
0 2013-09-05 09:52:09

解决方案2
0 2013-09-05 09:54:07

解决方案3
0 2013-09-05 09:58:29

解决方案4
0 2013-09-05 10:10:01