js实现切换

最新推荐文章于 2022-09-08 21:43:13 发布

原创最新推荐文章于 2022-09-08 21:43:13 发布 · 465 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #栏目切换 #ViewUI

JavaScript基础专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现页面窗体切换的方法。通过设置元素的display属性来控制窗体的显示与隐藏，并利用mouseover事件触发切换效果。具体包括为每个窗体设置不同的ID，当鼠标悬停在特定栏目上时，显示相应的窗体并隐藏其他窗体。

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>