<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="four.css">
<script src="../js/jquery-3.4.1.js"></script>
</head>
<body>
<script>
// $('#switcher-large').on('click',function(){
// $('body').addClass('large');
// $('body').removeClass('narrow');
// console.log("large")
// });
// $("#switcher-narrow").on('click',function(){
// $("body").removeClass('large');
// $('body').addClass('narrow');
// });
// $("#switcher-default").on('click',function(){
// $('body').removeClass('large');
// $('body').removeClass('narrow')
// })
// $('#switcher-large')
// .on('click',function(){
// $('body').removeClass('narrow');
// $('body').addClass('large');
// $('#switcher button').removeClass('selected');
// $(this).addClass('selected');
// });
// $('#switcher-narrow')
// .on('click',function(){
// $('body').addClass('narrow');
// $('body').removeClass('large');
// $('#switcher button').removeClass('selected')
// $(this).addClass('selected');
// });
// $('#switcher-default')
// .addClass('selected')
// .on('click',function(){
// $('body').removeClass('narrow');
// $('body').removeClass('large');
// $('#switcher button').removeClass('selected');
// $(this).addClass('selected');
// })
// $(document).ready(function(){
// $('#switcher-default')
// .addClass('selected')
// .on('click',function(){
// $('body').removeClass('large').removeClass('narrow');
// });
// $('#switcher-large')
// .on('click',function(){
// $('body').removeClass('narrow').addClass('large');
// });
// $('#switcher-narrow')
// .on('click',function(){
// $('body').removeClass('large').addClass('narrow');
// });
// $('#switcher button').on(
// 'click',function(){
// $('#switcher button').removeClass('selected');
// $(this).addClass('selected');
// }
// )
// })
// $(document).ready(function(){
// $('#switcher-default').addClass('selected').on('click',function(){
// $('body').removeClass();
// });
// $('#switcher-large').on('click',function(){
// $('body').removeClass().addClass('large');
// });
// $("#switcher-narrow").on('click',function(){
// $('body').removeClass().addClass('narrow');
// });
// $("#switcher button").on('click',function(){
// $('#switcher button').removeClass();
// $(this).addClass('selected');
// })
// })
// $(document).ready(function(){
// $('#switcher button').on('click',function(){
// $('body').removeClass();
// $("#switcher button").removeClass('selected');
// $(this).addClass('selected');
// });
// $('#switcher-default').addClass('selected');
// $('#switcher-large').on('click',function(){
// $('body').addClass('large');
// })
// $('#witcher-narrow').on('click',function(){
// $('body').addClass('narrow');
// })
// });
// $(document).ready(function(){
// $('#switcher button').on('click',function(event){
// var bodyClass=this.id.split('-')[1];
// $('body').removeClass().addClass(bodyClass);
// $('#switcher button').removeClass('selected');
// $(this).addClass('selected');
// event.stopPropagation();
// // event.preventDefault();
// });
//
// });
// $(document).ready(function(){
// $('#switcher').hover(function(){
// $(this).addClass('hover');
// },function(){
// $(this).removeClass('hover');
// })
// })
// $(document).ready(function(){
// $('#switcher h3').click(function(){
// $('#switcher button').toggleClass('hidden');
// })
// })
// $(document).ready(function(){
// //点击按钮之后，在修改内容区的样式之后折叠样式转换器。
// //导致这一问题的原因是事件冒泡
// $('#switcher').click(function(){
// $('#switcher button').toggleClass('hidden');
// })
// })
// $(document).ready(function(){
// //JQuery的hover方法
// // 1.让我们可以在鼠标指针进入元素和离开元素时，
// //通过JavaScript来改变元素的样式
// // 2.避免了JavaScript中的事件传播导致的问题
// $('#switcher h3').hover(
// function(){
// $(this).addClass('hover')},
// function(){
// $(this).removeClass('hover');
// });
// })
// $(document).ready(function(){
// $('#switcher-default').addClass('selected');
// $('#switcher').click(function(event){
// if($(event.target).is('button')){
// var bodyClass=event.target.id.split('-')[1];
// $('body').removeClass().addClass(bodyClass);
// $('#switcher button').removeClass('selected');
// $(event.target).addClass('selected');
// }else{
// $('#switcher button').toggleClass('hidden');
// }
// });
// })
$(document).ready(function(){
// 内置的事件委托功能
$('#switcher').on('click','button',function(){
var bodyClass=event.target.id.split('-')[1];
$('body').removeClass().addClass(bodyClass);
$('#switcher button').removeClass('selected');
$(this).addClass('selected');
});
$('#switcher').click(function(event){
if(!$(event.target).is('button')){
$('#switcher button').toggleClass('hidden');
}
});
//off()方法移除单击事件
$('#switcher-narrow,#switcher-large').click(function(){
$('#switcher').off('click');
})
});
// $(document).ready(function(){
// //事件处理程序中的变量event保存着事件对象，
// //而event.target属性保存着发生事件的目标元素
// $('#switcher').click(function(event){
// if(event.target==this){
// $('#switcher button').toggleClass('hidden');
// }
// });
// });
</script>
<div id="switcher">
<h3>Style Switcher</h3>
<button id="switcher-default">
Default
</button>
<button id="switcher-narrow">
Narrow Column
</button>
<button id="switcher-large">
Large Print
</button>
</div>
<p class="chapter">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut ipsam consequatur voluptates animi repudiandae explicabo dolorum sed quod inventore sequi. Quis pariatur laudantium sed nostrum molestiae dolorum, quidem blanditiis recusandae.
Molestias nulla labore numquam repellendus laudantium cum minus animi doloribus, tempora minima repellat itaque ea deserunt? Optio recusandae doloribus veniam est vitae facilis culpa dolorem nulla. Modi deserunt eaque veniam.
Adipisci, earum obcaecati qui sapiente eum quibusdam doloremque ea perferendis impedit dignissimos harum corporis voluptatum! Ex, nesciunt, consequuntur, delectus error doloribus architecto dicta vero adipisci quasi quidem ipsum officiis similique.
Dolor consequuntur molestias cum aperiam obcaecati vel itaque nemo soluta, dolorum, corrupti totam laudantium nulla quibusdam esse eum deleniti provident recusandae dolore asperiores fugit aut autem porro corporis! Quae, quisquam.
Ut harum ipsa dolor porro nisi vitae, cupiditate labore sint deserunt consectetur repudiandae, sapiente incidunt voluptatum. Exercitationem at laborum aliquam, soluta, aperiam culpa pariatur in sed officia voluptates eaque iure.
</p>
</body>
</html>