滑动门代码，网上很流行

最新推荐文章于 2021-08-03 19:03:11 发布

longxin123

最新推荐文章于 2021-08-03 19:03:11 发布

阅读量2.6k

点赞数

文章标签： class border 网易 xhtml html float

本文链接：https://blog.csdn.net/longxin123/article/details/2947710

版权

<!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" />
<script>
function dj(i)
{

for(j=1;j<5;j++)
    {
if(i==j){
   document.getElementById("a"+j).className="li2";
   document.getElementById("b"+j).style.display="";
          }
   else
    {
   document.getElementById("a"+j).className="li1";
   document.getElementById("b"+j).style.display="none";
      }
     }

}
</script>
<title>网上流行的滑动门 </title>
<style>
/* CSS Document */
body { text-align: center; font-family:"宋体", arial;margin:0; padding:0; background: #FFF; font-size:12px; color:#000;}
div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0;}
h1,h2,h3,h4,h5,h6 { margin:0; padding:0;}
table,td,tr,th{font-size:12px;}
/* 链接颜色 */
a:link {color: #1f3a87; text-decoration:none;}
a:visited {color: #83006f;text-decoration:none;}
a:hover {color: #bc2931; text-decoration:underline;}
a:active {color: #bc2931;}
/* 滑动门 */
#c{width:243px; height:22px; margin:0 auto; font-size:12px; border:#94D5F3 1px solid;}
#c ul{ list-style:none; margin:0; padding:0;}
#c .li1 { width:60px; height:22px; display:block;border-bottom: #94D5F3 1px solid;border-right: #94D5F3 1px solid; background-color: #DBF2FD; float:left;}

#c .li2{ width:60px; height:22px; display:block; border-bottom:none; background-color: #fff; border-right: #94D5F3 1px solid;float:left;}

.txt{ width:243px; height:100px; padding:0;}
</style>

</head>

<body>
新浪，网易这些大站的首页都使用了滑动门，占用空间少，网上很流行。<br>
<div id="c">
<ul>
<li id=a1 class="li1"><a οnclick="dj(1)" href="#">aaa</a></li>
<li id=a2 class="li2"><a οnclick="dj(2)" href="#">bbb</a></li>
<li id=a3 class="li1"><a οnclick="dj(3)" href="#">ccc</a></li>
<li id=a4 class="li1" style="border-right:none"><a οnclick="dj(4)" href="#">ddd</a></li></ul>
<div id=b1 class="txt"><br>新浪，网易这些大站的首页都使用了滑动门，占用空间少，网上很流行</div>
<div id=b2 class="txt" style="display:none"><br><br><a href="http://www.buscx.cn/">http://www.buscx.cn/</a></div>
<div id=b3 class="txt" style="display:none"><br><a href="http://www.bjzbus.cn/">http://www.bjzbus.cn/</a></div>
<div id=b4 class="txt" style="display:none"><br>新浪，网易这些大站的首页都使用了滑动门，占用空间少，网上很流行</div>
</div>
</body>
</html>

longxin123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
滑动门代码，网上很流行

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">function dj(i){ for(j=1;j { if(i==j){ document.getElementById("a"+j).className="li2"; document.getEle
复制链接

扫一扫