4.标签切换

最新推荐文章于 2023-01-08 19:54:50 发布

bluetears1988

最新推荐文章于 2023-01-08 19:54:50 发布

阅读量764

点赞数

分类专栏：网易前端笔试题

本文链接：https://blog.csdn.net/bluetears1988/article/details/12555281

版权

网易前端笔试题专栏收录该内容

5 篇文章 0 订阅

订阅专栏

4.参考给出的原型图和要求，手写 html，css和 js。要求实现 selected 效果，和鼠标切换不同 tab 分别显示不同的内容。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*
{
	margin:0;
	padding:0;
}

#outer
{
  // overflow:auto；

}

#tab1,#tab2,#tab3
{
	width:80px;
	height:20px;
	border:1px solid red;
        float:left;
        background-color:gray;
        text-align:center;
}

.on
{

       background-color:white;

}
.clear
{
       clear:both;

}
.hide
{
       display:none;

}
</style>
</head>
<body>
<div id="outer">

<div id="tab1" name="tab">tab1</div>
<div id="tab2" name="tab">tab2</div>
<div id="tab3" name="tab">tab3</div>
<div class="clear" id="clear1" name="content">abcedfgfertsfethdfefasdfe</div>
<!--<p>aaaa</p>
<p>bbbb</p>
<p>ccccc</p>-->
<div class="clear hide" id="clear2" name="content">abcdeff</div>
<div class="clear hide" id="clear3" name="content">abcdeff</div>


</div>


</body>
</html>

<script type="text/javascript">
 window.onload = function()
 {
        var otab = document.getElementByName("tab");
        for(var i = 0,len = otab.length; i < len; i++)
        {
               otab[i].index = i;
               otab[i].onclick = function()
               {
                     /* clearClassName();
                      this.className = "on";
                      showcontent(this.index);*/
                      alert(this.index);
               };

        }
}


function clearClassName()
{
        var otab = document.getElementByName("tab");
        for(var i = 0,len = otab.length; i < len; i++)
        {
            otab[i].className = "";
        }
}

function showcontent(i)
{
        var ocontent = document.getElementByName("content");
        for(var i = 0,len = ocontent.length; i < len; i++)
        {
            ocontent[i].className = "clear hide";
        }       

       ocontent[i].className = "clear"; 
}

</script>

可参考http://farlee.info/archives/jquery-tab-swap-js-css-ajax-javascript-wordpress.html

http://www.jb51.net/article/34858.htm

http://hi.baidu.com/fuyi_fly/item/fd7dff7766f5485d0d0a07be

bluetears1988

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
4.标签切换

4.参考给出的原型图和要求，手写 html，css和 js。要求实现 selected 效果，和鼠标切换不同 tab 分别显示不同的内容。*{ margin:0; padding:0;}#outer{ // overflow:auto；}#tab1,#tab2,#tab3{ width:80px; height:20px; border:1px s
复制链接

扫一扫