美文网首页
2018-12-28如何利用jQuery启动其他按钮方法

2018-12-28如何利用jQuery启动其他按钮方法

作者: 1f658716b568 | 来源:发表于2018-12-28 16:08 被阅读0次

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

相关文章

网友评论

      本文标题:2018-12-28如何利用jQuery启动其他按钮方法

      本文链接:https://www.haomeiwen.com/subject/euqelqtx.html