动态添加属性

最新推荐文章于 2024-06-20 07:30:00 发布

帅帅的Python

最新推荐文章于 2024-06-20 07:30:00 发布

阅读量521

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/weixin_42060598/article/details/83832489

版权

7 篇文章 0 订阅

订阅专栏

	<！DOCTYPE html>
	<HTML>
	<HEAD>
	<TITLE>选项卡</ TITLE>
	<meta charset =“utf-8”>
	<style type =“text / css”>
	#header {width：420px; height：100px; - 背景：红色;}
	#header span {display：block; width：120px; height：100px; text-align：center; font-size：30px; float：left; margin-right：20px; background：gray}
	#header .selected {background：yellow}
	#content {width：420px; -background：yellow;}
	#content div {width：100％; height：300px; display：none;}
	＃d1 {background：pink;}
	#d2 {background：blue;}
	＃d3 {background：green;}
	#content .current {display：block;}
	</样式>
	</ HEAD>
	<BODY>
	<div id =“header”>
	<span class =“selected”>新闻</ span>
	<跨度>娱乐</跨度>
	<跨度>军事</跨度>
	</ DIV>
	<div id =“content”>
	<div id =“d1”class =“current”>新闻</ div>
	<div id =“d2”>娱乐</ div>
	<div id =“d3”>军事</ div>
	</ DIV>
	</ BODY>
	<script type =“text / javascript”>
	oheader =的document.getElementById（ '报头'）
	ocontent =的document.getElementById（ '内容'）
	ASpan的= oheader.getElementsByTagName（ '跨度'）
	ADIV = ocontent.getElementsByTagName（ 'DIV'）
	for（var i = 0; i <aspan.length; i ++）{
	ASpan的[I]的.index =我
	//提醒（i）
	ASpan的[I] .onclick =函数（）{
	for（var j = 0; j <aspan.length; j ++）{
	//去除span的类名
	ASpan的[J机] .className = '';
	//去除content中的div类名
	ADIV [J机] .className = '';
	}
	this.className = '选择';
	ADIV [this.index机] .className = '当前'
	}
	}
	</ SCRIPT>
	</ HTML>

关注