在前面学习鼠标位置来显示不同的页面,现在来学习怎么样实现页面内容动态地改变。比如有一些不常用的功能,如果一直放在页面上,显得很占用位置,让用户一眼看上去,找不到聚焦点,这样用户感觉乱乱的,太复杂的感觉。为了保持界面清晰,简单,其实大家都喜欢简单,这样办事情效率才高。因此,设计页面交互时,常常在同一个页面会针对不同的用户,进行不同的内容显示,这样也叫个性设计,也可以叫人功智能自适应。怎么样实现隐藏呢?下面带着这个问题来学习。要实现隐藏,首先要学习HTML的隐藏的用法,如下面例子:
在上一个例子里添加了下面的代码:
// 隐藏按钮,缩小显示位置
var toggleSwitcher = function(event) {
if (!$(event.target).is('button')) {
$('#switcher button').toggleClass('hidden');
}
};
$('#switcher').on('click', toggleSwitcher);
// 模拟一次点击,让它在收缩状态
$('#switcher').click();
这一段代码,先定义了一个函数toggleSwitcher,它实现针对按钮进行隐藏。
$(event.target).is('button')
这一句用来判断是否是按钮类型的事件点击,如果是的话,就不要进行隐藏功能响应,在前面加了一个非运算符,就变成了非按钮点击都进行响应。
$('#switcher button').toggleClass('hidden')
这一行代码使用ID选择器,然后再根据类button选择器来找到三个按钮,然后在三个按钮里添加hidden="hidden",也就实现了隐藏的功能。不过toggleClass()函数有点像一个触发器,点击一下展开,点击一下隐藏。
TensorFlow入门基本教程
<!DOCTYPE html> <html> <body> <p hidden="hidden">这是一段隐藏的段落。</p> <p>这是一段可见的段落。</p> </body> </html>
<html> <head> <meta charset="utf-8"> <title>文章显示系统</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(){ //鼠标位置在切换窗口上显示不同的颜色 $('#switcher').hover( function(){ $(this).addClass('hover'); }, function(){ $(this).removeClass('hover'); } ); // 隐藏按钮,缩小显示位置 var toggleSwitcher = function(event) { if (!$(event.target).is('button')) { $('#switcher button').toggleClass('hidden'); } }; $('#switcher').on('click', toggleSwitcher); // 模拟一次点击,让它在收缩状态 $('#switcher').click(); }); </script> </head> <body> <div id="container"> <div id="switcher" class="switcher"> <h3>页面布局选择</h3> <button id="switcher-default"> 默认 </button> <button id="switcher-narrow"> 一般显示 </button> <button id="switcher-large"> 大号显示 </button> </div> </div> <span></span> </body> </html>
在上一个例子里添加了下面的代码:
// 隐藏按钮,缩小显示位置
var toggleSwitcher = function(event) {
if (!$(event.target).is('button')) {
$('#switcher button').toggleClass('hidden');
}
};
$('#switcher').on('click', toggleSwitcher);
// 模拟一次点击,让它在收缩状态
$('#switcher').click();
这一段代码,先定义了一个函数toggleSwitcher,它实现针对按钮进行隐藏。
$(event.target).is('button')
这一句用来判断是否是按钮类型的事件点击,如果是的话,就不要进行隐藏功能响应,在前面加了一个非运算符,就变成了非按钮点击都进行响应。
$('#switcher button').toggleClass('hidden')
这一行代码使用ID选择器,然后再根据类button选择器来找到三个按钮,然后在三个按钮里添加hidden="hidden",也就实现了隐藏的功能。不过toggleClass()函数有点像一个触发器,点击一下展开,点击一下隐藏。
运行的效果如下: