当前位置:首页 > 开发 > Web前端 > JavaScript > 正文

js实现切换

发表于: 2014-11-09   作者:百合不是茶   来源:转载   浏览:
摘要: js主要功能之一就是实现页面的特效,窗体的切换可以减少页面的大小,被门户网站大量应用思路: 1,先将要显示的设置为display:bisible 否则设为none 2,设置栏目的id ,js获取栏目的id,如果id为Null就设置为显示 3,判断js获取的id名字;再设置是否显示   代码实现:   html代码: <di


js主要功能之一就是实现页面的特效,窗体的切换可以减少页面的大小,被门户网站大量应用

思路:

   1,先将要显示的设置为display:bisible  否则设为none
    2,设置栏目的id  ,js获取栏目的id,如果id为Null就设置为显示
    3,判断js获取的id名字;再设置是否显示

 

代码实现:

 

html代码:

  <div id="mainRight">
<ul>
<li id="a" style="border-top-color:#00ff00;border-top-width:0px;border-top-style:solid" 

onmouseover="fun_changge(this,'mainRight_sp')">博客推荐</li>
<li id="b" style="border-top-color:#00ff00;border-top-width:3px;border-top-style:solid" onmouseover="fun_changge(this,'mainRight_ps')">视频资料</li>
	</ul>
	</div>
	<div id="mainRight_sp" style="display:none;">
	 <ul>
	<p><a href="#"><li>第十一届北京论坛致贺信</li></a></p>
	<p><a href="#"><li>中国新闻奖颁奖</li></a></p>
	<p><a href="#"><li>APEC未来寄望于中国</li></a></p>
	<p><a href="#"><li>赴澳大利亚出席G20峰会</li></a></p>
	<p><a href="#"><li>中日就改善关系达成共识 日承认钓鱼岛有不同主张</li></a></p>
	<p><a href="#"><li>外交部回应中日领导人会晤</li></a></p>
	<p><a href="#"><li>商务部回应墨西哥取消中国高铁招标:未得到消息</li></a></p>
	<p><a href="#"><li>++++++++++++++++</li></a></p>
	<p><a href="#"><li>俄罗斯议员建议:精子发给全体俄女性受精</li></a></p>		
	</ul>
	 </div>
	<!--1111-->
	<div id="mainRight_ps" style="display:''">
	<div id="mps"> 
	img src="image/sanxing_1.jpg" / >
	</div>	
     <div id="mps_boke"> 
	 <ul>
	<p><a href="#"><li>外交部回应中日领导人会晤</li></a></p>
	<p><a href="#"><li>商务部回应墨西哥取消中国高铁招标:未得到消息</li></a></p>
	<p><a href="#"><li>香港立法会否决调查梁振英“收400万英镑”动议</li></a></p>
	<p><a href="#"><li>俄罗斯议员建议:将普京精子发给全体俄女性受精</li></a></p>	
	</ul>
				 </div>				 		
			 </div>

 

 js代码实现 切换;

<script type="text/JavaScript">
   function fun_changge(li,id){
   var div = document.getElementById(id);
		if(div.style.display=='none'){
          div.style.display='';
		  li.style.borderTopWidth = '3px';
		  
		  if(id=="mainRight_sp"){
		    var div_sp = document.getElementById('mainRight_ps');
			div_sp.style.display='none';
			document.getElementById("b").style.borderTopWidth = '0px';
		  }else{
		   var div_sp = document.getElementById('mainRight_sp');
			div_sp.style.display='none';
			document.getElementById("a").style.borderTopWidth = '0px';
		  }
		 
		}
   }

</script>

 

 

js实现切换

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
Demo.htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
<div style=" text-align:center; margin-top:40px;"> <div class="menubox"> <span
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/
http://blog.csdn.net/sharetop/article/details/6313654 其实要实现这个效果在Android中并非难事,
div+css实现tab切换 ——我一直不太信任自己的记忆力,所以我把它们都写下来 为了方便你们查看,css
CSS3实现平滑切换 ——我一直不太信任自己的记忆力,所以我把它们都写下来 一直很羡慕很多电子产品
ViewPager实现的切换效果,共三种,可以作为引导动画,也可以作为页面切换。 代码MainActivity.java
index.html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.
VC++实现切换按钮 有时候要实现两个选项的切换,常规做法1是放两个Radio按钮控件,并设置这两个按钮
最近一段时间安装新应用时,很多应用第一次启动,都是通过几个页面的切换来展示一些内容,但是第二
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号