css使用方法

1.用opacity:0和visibility: hidden;

2.配合hover

3.原先opacity(透明度为0)hover设置为1,即从隐藏到显示,visibility同

注意的是,这边用display:none到block等不行,因为display是连渲染都不渲染,浏览器直接忽略显示直接连理都不理,但是opacity/visibility是会预留空间的,这一块还是占位置的,伪元素还是有效的

js使用方法

用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的“display”和“visibility”属性。

当style.display="block"或style.visibility="visible"时控件或见,当style.display="none"或style.visibility="hidden"时控件不可见。不同的是“display”不但隐藏控件,而且被隐藏的控件不再占用显示时占用的位置,而“visibility”隐藏的控件仅仅是将控件设置成不可见了,控件仍然占俱原来的位置。(理由同上面,浏览器不渲染display)

 

function displayHideUI()
{
var ui =document.getElementById("bbs");
ui.style.display="none";
}
function displayShowUI()
{
var ui =document.getElementById("bbs");
ui.style.display="";//display为空的话会好使,为block会使后边的空间换行
}
function visibilityHideUI()
{
var ui =document.getElementById("bbs");
ui.style.visibility="hidden";
}
function visibilityShowUI()
{
var ui =document.getElementById("bbs");
ui.style.visibility="visible";
}

然后配合鼠标事件

jq使用方法

通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:


$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

具体看:学习从无止境

 

the end

如果你还有什么方法,可以在底下告诉染念哦!

版权属于:染念
作品采用:本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
更新于: 2020年08月12日 21:10
0
发表评论
  1.     Windows 10 /    Google Chrome

    老哥新年快乐~

    1.     Windows 10 /    Google Chrome

      新年快乐

  2.     Windows 10 /    Google Chrome

    当然,不知道为什么,总喜欢用css先来解决问题



180 文章数
673 评论量
4 分类数
184 页面数
已在风雨中度过 7年68天14小时58分
目录
来自 《巧妙解决显示和隐藏的代码》
© 2024 染念Blog
浙ICP备19020194号-1
暗黑模式
暗黑模式
评论
返回顶部
© 2024 染念Blog
浙ICP备19020194号-1
暗黑模式
暗黑模式
评论
返回顶部