【JS每日练习】JS写的tab选项卡

最新推荐文章于 2022-04-10 12:12:13 发布

置顶 boia

最新推荐文章于 2022-04-10 12:12:13 发布

阅读量4.2k

点赞数

分类专栏： JavaScript练习文章标签： function class div javascript opera chrome

本文链接：https://blog.csdn.net/boiaprogramfan0420/article/details/7495041

版权

JavaScript练习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

今天在某个论坛看到一个选项卡的实例，觉得还不错，自己就试着写了下，代码如下

<html>
<head>
	<meta charset="utf-8" />
    <title>JS tab滑动门练习</title>
    <style>
		*{padding:0;margin:0;}
		.tab{width:600px;margin:40px auto;}
		.item{border:2px solid #000;border-radius:5px 5px 0 0;background:#000;height:40px;}
		.item ul{list-style:none;}
		.item li{width:120px;height:40px;line-height:40px;float:left;color:white;text-align:center;}	
		.item li:hover{color:#000;background:#999}
		.content{width:596px;border:2px #000 solid;border-top:0;border-radius:0 0 5px 5px;box-shadow:5px 5px 8px #666;}
		.content .summary{display:none;clear:both;}
		.content ul{list-style:disc;margin-left:40px;}	
	</style>
	<script>
        function itemOne()
        {
            $("one").style.display = "block";	
            $("two").style.display = "none";
            $("three").style.display = "none";
            $("four").style.display = "none";
        }
        function itemTwo()
        {
            $("two").style.display = "block";
            $("one").style.display = "none";
            $("three").style.display = "none";
            $("four").style.display = "none";
        }
        function itemThree()
        {
            $("three").style.display = "block";
            $("one").style.display = "none";
            $("two").style.display = "none";
            $("four").style.display = "none";		
        }
        function itemFour()
        {
            $("four").style.display = "block";
            $("one").style.display = "none";
            $("three").style.display = "none";
            $("two").style.display = "none";		
        }
        function $(m_id)
        {
            return document.getElementById(m_id);	
        }
    </script>
</head>

<body>
<div class="tab">
	<div id="item" class="item">
    	<ul>
        	<li onMouseOver="itemOne();">栏目一</li>
            <li onMouseOver="itemTwo();">栏目二</li>
            <li onMouseOver="itemThree();">栏目三</li>
            <li onMouseOver="itemFour();">栏目四</li>
        </ul>
    </div>
    <div id="content" class="content">
    	<div id="one" class="summary">
        	<ul>
            	<li>网页特效原理分析</li>
                <li>响应用户操作</li>
            	<li>提示框效果</li>
                <li>事件驱动</li>
            	<li>元素属性操作</li>
                <li>动手编写第一个JS特效</li>
            	<li>引入函数</li>
                <li>网页换肤效果</li>
                <li>展开/收缩播放列表效果</li>                               
            </ul>
        </div>
    	<div id="two" class="summary">
        	<ul>
            	<li>改变网页背景颜色</li>
                <li>函数传参</li>
            	<li>高调用形函数的编写</li>
                <li>126邮箱全选效果</li>
            	<li>循环及遍历操作</li>
                <li>调试器的简单实用</li>
            	<li>典型循环的构成</li>
                <li>for循环配合if判断</li>
                <li>className的使用</li>
                <li>innerHTML的使用</li>      
                <li>莫纳印象效果</li>  
                <li>数组</li>  
                <li>字符串连接</li>                           
            </ul>
        </div>
    	<div id="three" class="summary">
        	<ul>
            	<li>JavaScript组成：ECMAScript、DOM、JavaScript兼容性来源</li>
                <li>JavaScript出现的位置、优缺点</li>
            	<li>高调用形函数的编写</li>
                <li>126邮箱全选效果</li>
            	<li>循环及遍历操作</li>
                <li>调试器的简单实用</li>
            	<li>典型循环的构成</li>
                <li>for循环配合if判断</li>
                <li>className的使用</li>
                <li>innerHTML的使用</li>      
                <li>自动播放的选项卡</li>  
                <li>定时器的应用：数码时钟</li>  
                <li>程序调试方法</li>                           
            </ul>
        </div>
    	<div id="four" class="summary">
        	<ul>
            	<li>over....</li>
            </ul>
        </div>        
    </div>
</div>
</body>
</html>

请在chrome FF opera中试验

boia

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【JS每日练习】JS写的tab选项卡

今天在某个论坛看到一个选项卡的实例，觉得还不错，自己就试着写了下，代码如下 JS tab滑动门练习 *{padding:0;margin:0;} .tab{width:600px;margin:40px auto;} .item{border:2px solid #000;border-radius:5px 5px 0 0;background:#000;h
复制链接

扫一扫

专栏目录