Learn the mouse position in the front to display different pages, now let's learn how to dynamically change the content of the page. For example, there are some functions that are not commonly used. If they are always placed on the page, they will take up a lot of space, so that the user can not find the focus at a glance, so that the user feels messy and too complicated. In order to keep the interface clear and simple, in fact, everyone likes simplicity, so that the efficiency of doing things is high. Therefore, when designing page interaction, different content is often displayed on the same page for different users. This is also called personalized design, and it can also be called human power intelligent adaptation. How to achieve hiding? Learn with this question below. To achieve hiding, you must first learn the hidden usage of HTML, as shown in the following example:
Added the following code to the previous example:
// Hide the button, shrink the display position
var toggleSwitcher = function(event) {
if (!$(event.target).is('button')) {
$('#switcher button').toggleClass('hidden');
}
};
$('#switcher').on('click', toggleSwitcher);
// Simulate a click, leaving it in the retracted state
$('#switcher'). click();
This piece of code first defines a function toggleSwitcher, which implements hiding of buttons.
The sentence $(event.target).is('button')
is used to determine whether it is a button-type event click. If so, do not respond to the hidden function. Add a non operator in front of it, and it becomes Respond to non-button clicks.
$('#switcher button').toggleClass('hidden')
This line of code uses the ID selector, then finds the three buttons according to the class button selector, and adds hidden="hidden" to the three buttons , which also implements the hidden function. But the toggleClass() function is a bit like a trigger, click to expand, click to hide.
TensorFlow introductory basic tutorial
<!DOCTYPE html>
<html>
<body>
<p hidden="hidden">This is a hidden paragraph. </p>
<p>This is a visible paragraph. </p>
</body>
</html>
<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();
});
</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>
<span></span>
</body>
</html>
Added the following code to the previous example:
// Hide the button, shrink the display position
var toggleSwitcher = function(event) {
if (!$(event.target).is('button')) {
$('#switcher button').toggleClass('hidden');
}
};
$('#switcher').on('click', toggleSwitcher);
// Simulate a click, leaving it in the retracted state
$('#switcher'). click();
This piece of code first defines a function toggleSwitcher, which implements hiding of buttons.
The sentence $(event.target).is('button')
is used to determine whether it is a button-type event click. If so, do not respond to the hidden function. Add a non operator in front of it, and it becomes Respond to non-button clicks.
$('#switcher button').toggleClass('hidden')
This line of code uses the ID selector, then finds the three buttons according to the class button selector, and adds hidden="hidden" to the three buttons , which also implements the hidden function. But the toggleClass() function is a bit like a trigger, click to expand, click to hide.
The effect of running is as follows:
