关闭顶部展开顶部

如何制作可控制显示或隐藏的伸缩式DIV CSS新闻列表?_Div+CSS教程

编辑Tag赚U币
教程Tag:暂无Tag,欢迎添加,赚取U币!
  
  新闻列表是我们在页面制作中最常用的元素之一,根据项目的需要我们要求对这个新闻列表可控,可以点击显示或隐藏。用DIV CSS该如何制作呢?

  HTML元素有display属性,当display:none的时候,这个元素就不可见了。我们可以根据这一特性来构思,而元素的具体控制我们可以通过javascript脚本来实现。

  我们看下面的javascript脚本:

示例代码 [www.mb5u.com]
var flag=true;
function showNews(){
var fimg=document.getElementById("btnOpen");
var obj=document.getElementById("newsList");
if(flag){
obj.style.display="none";
fimg.src="open2.gif";
flag=false;
}else{
obj.style.display="";
fimg.src="open1.gif";
flag=true;
}
}

  两种状态,两个图片,在第一状态中,我们设置了元素display:none。即隐藏了HTML元素。
  我们看下面的CSS代码和XHTML代码:

示例代码 [www.mb5u.com]
*{
margin:0;padding:0;
}
body{
background-color:#fff;font-size:12px;text-align:left;
}

#topNews{
width: 300px;
margin: 60px auto 0 auto;
text-align:left;
padding-bottom:10px;
background: #fff url(new_bottom.gif) bottom no-repeat;
}
#newsList {
width:100%;
height:100px;
list-style:none;
padding-top:5px;
background: #fff url(new_bg.gif) repeat-y;
}
#newsList li{
text-indent:16px;
font-size:12px;
line-height: 20px;
float: left;
width:280px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
#topNews h1{
background: #fff url(new_top.gif) no-repeat;
height:33px;
font-size:12px;
}
#btnOpen{
margin-top:15px;
margin-left:12px;
display: inline;
cursor:pointer;
}
#topNews a{
padding-left:12px;
text-decoration: none;
color:#c00;
}
#topNews a:hover{
color:#f60;
text-decoration: underline;
}

示例代码 [www.mb5u.com]
<div id="topNews">
<h1>
<img id="btnOpen" src="open1.gif" alt="|折叠|展开|" onclick="showNews()" />
<span>模板无忧 mb5u.com</span>
</h1>
<ul id="newsList">
<li><a href="http://www.mb5u.com/" title=""></a></li>
<li><a href="http://www.mb5u.com/" title=""></a></li>
<li><a href="http://www.mb5u.com/" title=""></a></li>
<li><a href="http://www.mb5u.com/" title=""></a></li>
<li><a href="http://www.mb5u.com/" title=""></a></li>
<li><a href="http://www.mb5u.com/" title=""></a></li>
</ul>
</div>


  请大家注重看两个地方:

  1、id="btnOpen" src="open1.gif" alt="|折叠|展开|" onclick="showNews()" 这是切换的“开关”,点击触发javascript事件。

  2、ul id="newsList" 这是控制的内容区域,应用javascript控制其css的display属性。当正常显示时,属性值为空;我们需要隐藏时,其实属性值为none。

  我们看下面的最终运行效果:

div css xhtml xml 代码调试框 代码调试框 [www.mb5u.com]

[ 可先修改部分代码 再运行查看效果 ]

  在实际应用时,我们可以将javascript写到一个单独的文件中,在xhtml文件中调用就可以了。CSS也同样写入外部文件,link调用即可。

  对这个问题的解决,或许您有更好的办法,欢迎您来mb5u.com发布。大家共同进步。
  

来源:无忧整理//所属分类:Div+CSS教程/更新时间:2007-02-10
loading.. 评论加载中....
相关Div+CSS教程
闁汇埄鍨遍悺鏇綖閸℃稒鈷掓い鏇楀亾妞わ綇鎷�
婵炲濮崑鎾斥槈閺傝法澧涙俊鑼€濋柣銏╁灲閹凤拷
婵犵鈧啿鈧绱炲澶嬪殧鐎瑰嫭澹嗙换涔侀柣銏╁灲閹凤拷
婵犵鈧啿鈧绱炲澶婄闁诡垎鍕槬闁诲酣娼уΛ娑㈡偉閿燂拷
闂佺ǹ绻愰幊搴ㄥ焵椤掑倸甯堕幖瀛樼矒瀹曟繈鏁撻敓锟�
闂佺ǹ绻愰幊搴ㄥ焵椤掆偓閸氬绮婇敂鍓х煓閻庯絺鏅濋惌娆戠磽娓氬﹥瀚�
闂佽 鍋撴い鏍ㄧ☉閻︻噣鏌涘┑鎰胺缂併劍妞藉銊╊敍濞嗘垵绗¢梺鍝勫€婚幊鎾舵閿燂拷
闂佸搫鍟版慨椋庣礊婢舵劖鐓i悹杞拌濞层倕霉閿濆棙绀€闁告ɑ鐗犲畷鎰版晸閿燂拷
濠碘槅鍨崜婵嗩熆濡吋瀚绘い鎾寸箖鐎氾拷
婵犵鈧啿鈧绱炲鍥ㄥ妞ゆ挻绻冪€氳櫕淇婇妤€澧叉繝顫嫹
濠碘槅鍨崜婵嗩熆濮椻偓瀹曨剟顢欓崗鐓庘偓鐢告煛閸繄孝濠殿噯鎷�
濠碘槅鍨崜婵嗩熆濮椻偓閺屽懘鍩€椤掆偓閳诲酣骞戦幇闈涙闂佸搫瀚搁幏锟�
濠碘槅鍨崜婵嗩熆濮椻偓瀹曪綁骞嬪┑鍫紝
婵犵鈧啿鈧绱炲澶婄煑闁瑰瓨绻勯瀛樹繆椤栨澧叉繝顫嫹
闁诲骸鍘滈崜婵嬫偋閹惰棄鐭楀┑鐘插暙閼靛綊鏌ら懞銉ュ闁绘牭缍佸畷娆撴晸閿燂拷
UB闂佸湱绮崝妤呯嵁閸モ晜瀚氶悗娑櫳戦~锟�
闂佽壈椴稿濠氭焾鐎电硶鍋撻獮鍨仾婵犫偓閿燂拷
闁诲骸绠嶉崹鍝勶耿閸㈢嚜
闂佸憡姊绘慨椋庣礊婢跺瞼鍗氭繛鍡楀閸炲绻涚紙鐘哄厡闁稿骏鎷�
缂傚倷鐒﹂悷锕傚垂濠婂嫮顩锋い鎺嶇缁插湱鈧偣鍊濈紓姘额敊閿燂拷
©2017 www.mb5u.com濠碘槅鍨崜婵嗩熆濮椻偓瀵噣鎮╅幓鎺撳瘶
闂佽 鍋撻柟顖滃椤ワ拷&闂佸憡甯掑Λ鏃堟閿燂拷