轮播tab作业

qianmingmaoyao

已于 2022-09-22 13:45:49 修改

阅读量56

点赞数

文章标签： javascript 前端 html

于 2022-09-20 00:39:40 首次发布

本文链接：https://blog.csdn.net/qianmingmaoyao/article/details/126944855

版权

<style type="text/css">
	#outer{
		width:385px;
		margin:0px auto;
	}
	#tab1,#tab2,#tab3,#tab4,#tab5{
		width:71px;
		height:30px;
		margin-right:0px;
		
		display:inline-block;
		text-align:center;
		line-height:30px;
		font-weight:bold;
		font-size:13px;
		
		border:1px solid blue;
		z-index:1;
	}
	
	#content{
		width:383px;
		height:246px;
		
		margin-top:-1px;
		
		border:1px solid blue;
		z-index:2;
	}
	
	#content2,#content3,#content4,#content5{
		display:none;
	}
</style>
<script language="javascript">
	var index = 1;

	function show(id){
		// 获得事件的主要对象		
		var tab = document.getElementById("tab"+id);
		var content = document.getElementById("content"+id);
		
		// 改变tab元素的样式
		for(var i=1; i<=5; i++){
			if(i != id){
				var tabOther = document.getElementById("tab"+i);
				tabOther.style.zIndex = 1;
				tabOther.style.borderBottom = "1px solid blue";
				tabOther.style.backgroundColor = "white";
				tabOther.style.color = "black";
			}
		}
		
		tab.style.borderBottom = "1px solid white";
		tab.style.backgroundColor = "lightblue";
		tab.style.color = "#FFFFFF";
		tab.style.zIndex = 10;
		
		// 显示选中的tab内容
		for(var i=1; i<=5; i++){
			if(i != id){
				document.getElementById("content"+i).style.display = "none";
			}
		}		
		content.style.display = "block";
		
		index = id;
	}
	
	// 图片自动轮换
	function autoTab(){
		if(index == 6)
			index = 1;
	
		show(index);
		index++;
		
		setTimeout('autoTab()',2000);
	}
	
	window.onload = autoTab;
	
</script>
</head>

<body>
	<div id="outer">
	<div id="tab1" onclick="show(1)">大片</div>
    <div id="tab2" onclick="show(2)">嘉宾聊天</div>
    <div id="tab3" onclick="show(3)">公开课</div>
    <div id="tab4" onclick="show(4)">体育</div>
    <div id="tab5" onclick="show(5)">NBA运作</div>
    
    <div id="content">
    	<div id="content1"><img src="images/大片_Tab1.png" /></div>
        <div id="content2"><img src="images/嘉宾聊天_Tab2.png" /></div>
        <div id="content3"><img src="images/公开课_Tab3.png" /></div>
        <div id="content4"><img src="images/体育_Tab4.png" /></div>
        <div id="content5"><img src="images/NBA_Tab5.png" /></div>
    </div>
    </div>

树形菜单

<style type="text/css">
	body{
		font-size:13px;
		line-height:20px;
	}

	#outerul{
		text-align:left;
		margin:30px;
		padding:0px;

		cursor:pointer;
	}
	
	#outerul ul a{
		text-decoration:none;
		color:black;
	}
	
	#outerul li{
		margin:-4px 0 0 -30px;
		padding:0px;
		
		list-style-type:none;
	}
	
	#outerul .symbolsPlus{
		float:left;
		width:32px;
		height:15px;
		background-positon:0 50%;
		background-repeat:no-repeat;
	}

	#outerul .symbolsSub{
		float:left;
		width:18px;
		height:15px;
		background-positon:0 50%;
		background-repeat:no-repeat;
	}
</style>
</head>

<body>
	<ul id="outerul">
    	<li>名站导航
        	<ul>
            	<li><a href="#">百度帖吧</a>
                	<ul>
                    	<li>旅游吧</li>
                        <li>古典音乐吧</li>
                        <li>摄影吧</li>
                        <li>出国留学吧</li>
                    </ul>
                </li>
                <li><a href="#">新浪微博</a></li>
                <li><a href="#">腾讯空间</a></li>
                <li><a href="#">网易邮箱</a></li>
                <li><a href="#">淘宝商城</a></li>
            </ul>
        </li>
        <li>常用软件
        	<ul>
            	<li><a href="#">杀毒软件</a></li>
                <li><a href="#">聊天工具</a></li>
                <li><a href="#">网页浏览</a></li>
            </ul>
        </li>
        <li>热门游戏
        	<ul>
	            <li><a href="#">生化危机</a></li>
                <li><a href="#">红色警戒</a></li>
                <li><a href="#">帝国时代</a></li>
                <li><a href="#">反恐精英</a></li>
            </ul>
        </li>
        <li>桌面背景
        	<ul>
            	<li><a href="#">深谷幽涧</a></li>
                <li><a href="#">群山峻岭</a></li>
                <li><a href="#">茵茵草原</a></li>
                <li><a href="#">热带风暴</a></li>
            </ul>
        </li>
    </ul>
</body>

<script language="javascript">
	var menu, subMenus, menuIcon;
	
	function init(){
		menuArray = document.getElementById("outerul").getElementsByTagName("li");
		for(var i=0; i<menuArray.length; i++){
			subMenus = menuArray[i].getElementsByTagName("ul");
			if(subMenus.length > 0){
				menuIcon = document.createElement("span");
				menuIcon.className = "symbolsPlus";
				menuIcon.style.backgroundImage = "url(images/z-plus.jpg)";
				menuIcon.onclick = function(){
					showHide(this.parentNode);
				}
				menuArray[i].insertBefore(menuIcon, menuArray[i].firstChild);
				subMenus[0].style.display = "none";
			}else{
				menuIcon = document.createElement("span");
				menuIcon.className = "symbolsSub";
				menuIcon.style.backgroundImage = "url(images/z-top.gif)";
				menuArray[i].insertBefore(menuIcon, menuArray[i].firstChild);
			}
		}
		
		// 遍历树，将末尾的图片置为z-end.gif
		var ulArray = document.getElementsByTagName("ul");
		for(var i=0; i<ulArray.length; i++){
			var liArray = ulArray[i].getElementsByTagName("li");
			var lastli  = liArray[liArray.length - 1];
			var span = lastli.firstChild;
			
			span.style.backgroundImage = "url(images/z-end.gif)";
		}
	}
	
	function showHide(parentNode){
		var ul = parentNode.getElementsByTagName("ul")[0];
		ul.style.display = (ul.style.display == "none") ? "block" : "none";
		var span = parentNode.getElementsByTagName("span")[0];
		span.style.backgroundImage = (ul.style.display == "none") ? "url(images/z-plus.jpg)" : "url(images/z-sub.jpg)";
	}
	
	window.onload = init;
</script>

下拉导航

<style type="text/css">
		#outer{
			width:100%;
			height:43px;
			line-height:43px;
			background:url(images/menu-bg.gif) top left repeat-x;
			}
			
		#outer ul{
			width:auto;
			height:43px;
			line-height:43px;
			list-style:none;
			}
		#outer li{
			float:left;
			width:auto;
			height:43px;
			line-height:43px;
			}
			
		#outer li a{
			/*width:100px;*/ /*a 没定义width的时候，宽度自适应。所以会和其下存在的ul宽度保持一致。 除非让其下的ul脱离文档流*/
			
			display:block;
			height:43px;
			line-height:43px;
			padding:0px 15px;
			
			text-align:center;
			font-style:normal;
			text-decoration:none;
			font-weight:bold;
			}
		#outer li a:hover{
			background-color:#0079b2;
			color:#ffffff;
			}
			
		/*-----------------------*/
		#outer li ul{
			border:2px solid #0079b2;
			border-top:none;
			height:auto;
			width:225px;
			display:none;
			
			position:absolute;		/*体会这句话为什么可以没有!!!!*/
			padding:0px;
			margin:0px;
			}
		#outer li li{
			display:block;
			float:none;				/*本题中，这句话一定要有*/
			
			/*border:1px solid red;*/
			margin:0px;
			padding:0px;
			text-align:left;
			}
		#outer li:hover ul{
			display:block;
			}
		#outer li ul a{
			display:block;
			text-align:left;		/*这句话很重要，下拉菜单如果要左对齐，就要写这句*/
			
			text-decoration:none;
			font-size:13px;
			font-family:宋体;
			}
		#outer li ul a:hover{
			background-color:lightgray;
			}
    </style>
</head>

<body>	
    <div id="outer">
        <ul>
            <li><a href="">首页</a></li>
            <li><a href="">产品</a>
                <ul>
                    <li><a href="">下拉式 CSS 菜单</a></li>
                    <li><a href="">水平 CSS 菜单</a></li>
                    <li><a href="">垂直 CSS 菜单</a></li>
                </ul>
            </li>
            <li><a href="">常见问题解答</a>
                <ul>
                    <li><a href="">下拉式 CSS 菜单</a></li>
                    <li><a href="">水平 CSS 菜单</a></li>
                    <li><a href="">垂直 CSS 菜单</a></li>
                </ul>
            </li>
            <li><a href="">联系我们</a></li>
        </ul>
    </div>

数组转换为字符串

     var obj = {
            name: 'momoko',
            age: 18,
            sex: '女'
        };
        //'{"name":"momoko","age":18,"sex":"女"}'
        console.log(JSON.stringify(obj));

        var arr = [{
            "id": "s001",
            "name": "xiguodong",
            "age": 18,
            "flag": false
        }, {
            "id": "s002",
            "name": "guibin",
            "age": 18,
            "flag": true
        }];
        // 将数组转换为json字符串
        //'[{"id":"s001","name":"xiguodong","age":18,"flag":false},{"id":"s002","name":"guibin","age":18,"flag":true}]'
        console.log(JSON.stringify(arr));

json转换为对象

  var objJSON = '{"name":"momoko","age":18,"sex":"女"}';
        // 将json串转换为对象
        console.log(JSON.parse(objJSON));
        var arrJSON = '[{"id":"s001","name":"xiguodong","age":18,"flag":false},{"id":"s002","name":"guibin","age":18,"flag":true}]';
        console.log(JSON.parse(arrJSON));