滑动门应用

最新推荐文章于 2024-09-12 18:02:32 发布

kaifadi

最新推荐文章于 2024-09-12 18:02:32 发布

阅读量475

点赞数

分类专栏： JS相关文章标签： div class xhtml border float html

JS相关专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">

</style></head>

<div id="div" style="height:380px; width:100%;">
<div style="height:370px;width:593px; background-color:#FFFFCC; padding:10px 0 0 10px">你是猪</div>
<div style="height:370px; width:593px;background-color:#FFFFCC;padding:10px 0 0 10px; display:none">你是牛</div>
<div style="height:370px; width:593px;background-color:#FFFFCC;padding:10px 0 0 10px; display:none">你是蜘蛛</div>
<div style="height:370px; width:593px; background-color:#FFFFCC;padding:10px 0 0 10px; display:none">你是奇美拉</div>
</div>

</div>
</body>
</html>
<script>
function ff(obj){
var ul = document.getElementById("ul")
var div = document.getElementById("div")
for(var i=0;i<ul.getElementsByTagName("li").length;i++)
{
     if(ul.getElementsByTagName("li")[i]==obj)
    {
         ul.getElementsByTagName("li")[i].className="li2"
         div.getElementsByTagName("div")[i].style.display="block"
       }
else
    {
      ul.getElementsByTagName("li")[i].className="li1"
         div.getElementsByTagName("div")[i].style.display="none"
    }
}
}
</script>

一个是背景图片的滑动门

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">

</style></head>

<div id="div" >
<div class="div1">你是猪</div>
<div class="div2">你是牛</div>
<div class="div2">你是蜘蛛</div>
<div class="div2">你是奇美拉</div>
</div>

封装一下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">

</style></head>

<body>
<div id="ss"> </div>
</body>
<script>
function Tab(id,num,title,content){
     this.obj = document.getElementById(id)           //父元素
     this.num = num                                   //选项卡的个数
     this.title = title                               //标题
     this.content = content
this.ul = ""                                     //记录那个ul
     this.div = ""                                    //记录包含内容的div
}

Tab.prototype.create=function(){
     var self = this
     var div = document.createElement("div")
      div.className = "all"
   this.obj.appendChild(div)
var divtitle = document.createElement("div")
      divtitle.className = "divtitle"
   div.appendChild(divtitle)
var ul = document.createElement("ul")
      ul.className = "ul"
   this.ul = ul
   divtitle.appendChild(ul)
      for(var i=0;i<this.num;i++)
     {
    var li = document.createElement("li")
    li.className = (i==0?"li2":"li1")
    li.innerHTML = this.title[i]
    li.οnclick=function(){ self.change(this) }
    ul.appendChild(li)
}
var divcontent = document.createElement("div")
      divcontent.className = "divcontent"
   this.div = divcontent
   div.appendChild(divcontent)
   for(var i=0;i<this.num;i++)
     {
    var div = document.createElement("div")
    div.className = (i==0?"div1":"div2")
    div.innerHTML = this.content[i]
    divcontent.appendChild(div)
}
}

Tab.prototype.change=function(obj){
     for(var i=0;i<this.ul.getElementsByTagName("li").length;i++)
      {
        if(this.ul.getElementsByTagName("li")[i]==obj)
      {
            this.ul.getElementsByTagName("li")[i].className="li2"
            this.div.getElementsByTagName("div")[i].style.display="block"
         }
     else
   {
         this.ul.getElementsByTagName("li")[i].className="li1"
            this.div.getElementsByTagName("div")[i].style.display="none"
         }
   }
}

var oo = new Tab("ss",4,["人族","兽族","不死族","精灵族"],["sky","grubbly","Fov","moon"])
oo.create()
</script>
</html>