网站建设   网站建设技术   网页设计   JavaScript  

javascript针对DOM的应用分析(四)

人浏览  发布时间:2021-02-15

从这张开始就和大家说一些实用的效果的写法。当然首当其冲的就是我们可爱的TAB选项卡,用JQ写选项卡当然是很方便的而且方法也很多。其实用原生的JS写选项卡方法也很多 下面我就...
从这张开始就和大家说一些实用的效果的写法。当然首当其冲的就是我们可爱的TAB选项卡,用JQ写选项卡当然是很方便的而且方法也很多。其实用原生的JS写选项卡方法也很多
下面我就写几个给大家看看 
一,点击传参方法 
复制代码代码如下:

<script> 
function tab(dom){ 
var list = document.getElementById("list").getElementsByTagName("li"); 
var con = document.getElementById("con").getElementsByTagName("div"); 
for(var i=0;i<list.length;i++){ 
if(list==dom){ 
list.className = "on"; 
con.style.display = "block"; 

else{ 
list.className=""; 
con.style.display="none"; 



</script> 
<div id="list"> 
<ul> 
<li class="on">1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
</ul> 
</div> 
<div id="con"> 
<div style="display:block;">111111</div> 
<div style="display:none;">222222</div> 
<div style="display:none;">333333</div> 
<div style="display:none;">444444</div> 
</div> 

我解释一下 
var list = document.getElementById("list").getElementsByTagName("li"); 
var con = document.getElementById("con").getElementsByTagName("div"); 
获取dom元素,这个不用说了吧。写什么效果第一件事都是获取元素 
复制代码代码如下:

for(var i=0;i<list.length;i++){ 
if(list==dom){ 
list.className = "on"; 
con.style.display = "block"; 

else{ 
list.className=""; 
con.style.display="none"; 

遍历一下所有的li元素,找到和传进来的dom一样的东西,然后把他的class设置为on,并且把相对应的div给显示出来,其他的就全部把className设置为空,并且把对应的div给隐藏。 
大概就是这样。但是大家肯定就都发现了这样的写法的缺点,就是每个li都要设置一个onclick时间传入它自己。这样有点违反了结构与表现相分离的道理。所以我们就换种写法 
二,直接写入鼠标事件方法 
复制代码代码如下:

<script> 
function tab(){ 
var list = document.getElementById("list").getElementsByTagName("li"); 
var con = document.getElementById("con").getElementsByTagName("div"); 
for(var i = 0;i<list.length;i++) 

list.onclick=function(){ 
for(var i=0;i<list.length;i++){ 
if(list==this){ 
list.className = "on"; 
con.style.display = "block"; 

else{ 
list.className=""; 
con.style.display="none"; 





window.onload=function(){tab();} 
</script> 
<div id="list"> 
<ul> 
<li class="on">1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
</ul> 
</div> 
<div id="con"> 
<div style="display:block;">111111</div> 
<div style="display:none;">222222</div> 
<div style="display:none;">333333</div> 
<div style="display:none;">444444</div> 
</div> 

只是简单的改动一下就可以了,因为在JS中有这些方法可以用比如onclick,onmouseover等等,但是用的时候我要先把所有的要用这个事件的元素都遍历一下,如果那个被点击就会传入一个this,我们只需要像第一种方法一样判断一下list是不是和这个this相同,然后下面的操作和第一种方法一样 
(这样两种方法都是比较简单的写法,在JS里还有一些比较高级复杂的写法,但是用到的思想和这两种写法大多一样。) 
好了就到这里,建议大家可以用这种方法写一个图片切换效果,我想应该很简单吧 
(编辑:360度神搜网)

备注:本网站资料免费下载浏览,为百度空间下载资料,需用户注册有百度账号,登陆后才可浏览下载,如有疑问联系我们免费解答。


你可能喜欢的:

友情链接
24小时服务电话:13992352808 地址:陕西省西安市,长乐西路180号 WebDesign ©2012 Corporation 360°神搜网网络科技传媒技术服务工作室 网站地图