I learned about the event processing of button clicks and the sequence of event processing. Now we will continue to learn how to switch the display of the page. In fact, this process is the process of modifying the style. Therefore, the code can be modified as follows:
Mainly add the following function here:
var setBodyClass = function(className) {
$('body').removeClass().addClass(className);
$('#switcher button').removeClass('selected');
$( '#switcher-' + className).addClass('selected');
$('#switcher').off('click', toggleSwitcher);
if (className == 'default') {
$('#switcher') .on('click', toggleSwitcher);
}
};
The parameter className of this function is part of the id of the button decomposed earlier, such as: default, narrow, large.
$('body').removeClass().addClass(className);
class = "large"
When the browser renders, it will find the corresponding style definition in page.css, as follows:
body.large .chapter {
font-size: 1.5em;
}
body.narrow .chapter {
width: 250px;
}
When it is the default attribute, there is no corresponding style, so no modification is made. When it is a large attribute, the font size will be modified when there are large and chapter attributes in the body.
$('#switcher button').removeClass('selected');
This line of code is to remove the selected state of the button.
$('#switcher-' + className).addClass('selected');
This line of code is to set the corresponding button in the selected state, here use '#switcher-' + className to generate a complete id string, you can Find the corresponding id button.
$('#switcher').off('click', toggleSwitcher);
This line of code is to remove all click trigger hidden functions.
if (className == 'default') {
$('#switcher').on('click', toggleSwitcher);
Introduction to Bitcoin Source Code
https://edu.csdn.net/course/detail/6998
In-depth understanding of Matplotlib
In-depth Numpy
<html>
<head>
<meta charset="utf-8">
<title>Article Display System</title>
<link rel="stylesheet" href="page/page.css" type="text/css" />
<script type="text/JavaScript" src="jquery/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
//The mouse position displays a different color on the switch window
$('#switcher').hover(
function(){ $(this).addClass('hover'); },
function(){ $(this).removeClass('hover'); }
);
// hide the button, reduce the display position
var toggleSwitcher = function(event) {
if (!$(event.target).is('button')) {
$('#switcher button').toggleClass('hidden');
}
};
$('#switcher').on('click', toggleSwitcher);
// Simulate a click and keep it in a retracted state
$('#switcher').click();
//
$('#switcher-default').addClass('selected');
// function to switch format display
var setBodyClass = function(className) {
$('body').removeClass().addClass(className);
$('#switcher button').removeClass('selected');
$('#switcher-' + className).addClass('selected');
$('#switcher').off('click', toggleSwitcher);
if (className == 'default') {
$('#switcher').on('click', toggleSwitcher);
}
};
// button event response
$('#switcher').click(function(event) {
if ($(event.target).is('button')) {
var bodyClass = event.target.id.split('-')[1];
console.log(bodyClass);
setBodyClass(bodyClass);
}
});
});
</script>
</head>
<body>
<div id="container">
<div id="switcher" class="switcher">
<h3>Page layout selection</h3>
<button id="switcher-default">
default
</button>
<button id="switcher-narrow">
general display
</button>
<button id="switcher-large">
Large display
</button>
</div>
<div id="header">
<h2>Theme</h2>
<h2 class="subtitle">Subtitle</h2>
<div class="author">作者</div>
</div>
<div class="chapter" id="chapter-preface">
<h3 class="chapter-title">前言</h3>
<p>Test it</p>
<p>You can write a paragraph here</p>
<p>Time</p>
<p>Time</p>
</div>
<div class="chapter" id="chapter-1">
<h3 class="chapter-title">Chapter title</h3>
<p>The main content of the article</p>
</div>
</div>
<span></span>
</body>
</html>
Mainly add the following function here:
var setBodyClass = function(className) {
$('body').removeClass().addClass(className);
$('#switcher button').removeClass('selected');
$( '#switcher-' + className).addClass('selected');
$('#switcher').off('click', toggleSwitcher);
if (className == 'default') {
$('#switcher') .on('click', toggleSwitcher);
}
};
The parameter className of this function is part of the id of the button decomposed earlier, such as: default, narrow, large.
$('body').removeClass().addClass(className);
class = "large"
When the browser renders, it will find the corresponding style definition in page.css, as follows:
body.large .chapter {
font-size: 1.5em;
}
body.narrow .chapter {
width: 250px;
}
When it is the default attribute, there is no corresponding style, so no modification is made. When it is a large attribute, the font size will be modified when there are large and chapter attributes in the body.
$('#switcher button').removeClass('selected');
This line of code is to remove the selected state of the button.
$('#switcher-' + className).addClass('selected');
This line of code is to set the corresponding button in the selected state, here use '#switcher-' + className to generate a complete id string, you can Find the corresponding id button.
$('#switcher').off('click', toggleSwitcher);
This line of code is to remove all click trigger hidden functions.
if (className == 'default') {
$('#switcher').on('click', toggleSwitcher);
These lines of code illustrate that hidden buttons are only allowed to appear in the default state.