利用jQuery启动其他按钮方法

时间：2021-04-16

　　现在，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>标签中同时移除两个类，让页面恢复为初始状态。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章