现在，Large Print按钮开始生效了。接下来，我们要以类似的方式处理其他两个按钮(Default和Narrow)，让它们也都执行各自的任务。这个过程很简单，即分别使用.on()为它们添加一个单击处理程序，同时视情况移动或添加类。完成之后的代码如下面所示：
$(document).ready(function(){
$('#switcher-default').on('click',function(){
$('body').removeClass('narrow');
$('body').removeClass('large');
});
$('#switcher-narrow').on('click',function(){
$('body').addClass('narrow');
$('body').removeClass('large');
});
$('#switcher-large').on('click',function(){
$('body').removeClass('narrow');
$('body').addClass('large');
});
});
以下是配套的narrow类的CSS规则：
body .narrow .chapter{
width:250px;
}
现在，如果单击Narrow Column按钮，随着相应的CSS生效，文本会相应变化。
单击Default按钮将从<body>标签中同时移除两个类，让页面恢复为初始状态。
最新文章
热门文章
猜你喜欢
