javascript div的顯示隱藏

這個(gè)需求很簡(jiǎn)單

??btn1

??btn2

??btn3

$(function(){

??var?items?=?$('.content?.item');//拿到所有的div

??var?btns?=?$('.nav?button');//拿到所有的按鈕

??btns.on('click'?,?function(){

var?btn?=?$(this);//得到當(dāng)前點(diǎn)擊的按鈕

var?index?=?btn.index();//當(dāng)前點(diǎn)擊的順序是第幾個(gè)

items.eq(index).show().siblings().hide();

//將items?的第?index?個(gè)顯示，其它的全部隱藏

??});//

??//btns.eq(0).click();//如果有必要可以默認(rèn)觸發(fā)第一個(gè)按鈕的點(diǎn)擊事件

});這個(gè)需求很簡(jiǎn)單 比如這樣

btn1btn2btn3 js $(function(){var?items?=?$('.content?.item');//拿到所有的divvar?btns?=?$('.nav?button');//拿到所有的按鈕btns.on('click'?,?function(){var?btn?=?$(this);//得到當(dāng)前點(diǎn)擊的按鈕var?index?=?btn.index();//當(dāng)前點(diǎn)擊的順序是第幾個(gè)items.eq(index).show().siblings().hide();//將items?的第?index?個(gè)顯示，其它的全部隱藏});btns.eq(0).click();//如果有必要可以默認(rèn)觸發(fā)第一個(gè)按鈕的點(diǎn)擊事件 });

html Div隱藏問(wèn)題

實(shí)現(xiàn)div隱藏可以通過(guò)設(shè)置display、visible和div的大小等實(shí)現(xiàn)隱藏效果。

CSS display 屬性

display 屬性規(guī)定元素應(yīng)該生成的框的類(lèi)型。值為none時(shí)，此元素不會(huì)被顯示。

/*示例*/

div{display:none;}

CSS visibility 屬性

visibility 屬性規(guī)定元素是否可見(jiàn)。值為hidden時(shí)表示元素是不可見(jiàn)的。

/*示例*/

div{visible:hidden;}

提示:visible:hidden;和display:none;的區(qū)別是，即使不可見(jiàn)的元素也會(huì)占據(jù)頁(yè)面上的空間。 "display" 屬性可以用來(lái)創(chuàng)建不占據(jù)頁(yè)面空間的不可見(jiàn)元素。(visible和display屬性的其他可能值可在W3School查看)。

設(shè)置DIV的大小實(shí)現(xiàn)隱藏

將div的寬度和高度設(shè)置為零，也可以達(dá)到隱藏的效果。

/*示例*/

width：0px;

height:0px;

overflow:hidden;/*規(guī)定當(dāng)內(nèi)容溢出元素框時(shí)隱藏。防止div大小設(shè)置為零，里面的文本卻還是顯示。*/

}div的visibility可以控制div的顯示但是隱藏后頁(yè)面顯示空白: style="visibility: none;"document.getElementById("typediv1").style.visibility="hidden";//隱藏document.getElementById("typediv1").style.visibility="visible";/↑/顯示 ...初始化div是隱藏的

traget.style.display="block";

="search('div1');"改成="show('div1');"

總結(jié)

以上是生活随笔為你收集整理的div隐藏(设置div隐藏)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。