点击下拉，全选框，点击改变

最新推荐文章于 2024-03-17 20:14:27 发布

嘴强程序员

最新推荐文章于 2024-03-17 20:14:27 发布

阅读量253

点赞数

文章标签： elementui html sass

本文链接：https://blog.csdn.net/qq_62898618/article/details/123341908

版权

点击下拉


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {

				margin: 0px;
				padding: 0px;
				list-style: none;

			}

			body {
				font-size: 12px;
				color: black;
				line-height: 30px;
			}

			img {
				vertical-align: middle;
				border: 0;

			}

			ul>li {
				padding-left: 35px;

			}

			#con>ul>ul>li {
				padding-left: 50px;
				line-height: 20px;
			}
			.act{
				color: red ;
				font-size: 0.875rem;
			  font-weight: 20px;
			}
		</style>
		
		
	</head>
	<body>
		<div id="con">


			<ul>
				<li onclick="openUi('out1')" ><img src="img/z-1.jpg"><span>分类讨论区</span></li>
				<ul id="out1" style="display: none;">
					<li><img src="img/z-top.gif">BBS&nbsp;系统</li>
					<li><img src="img/z-top.gif">共建水木</li>
					<li><img src="img/z-top.gif">站务公告栏</li>
					<li><img src="img/z-top.gif">妆点水木</li>
					<li><img src="img/z-end.gif">申请版主</li>
				</ul>
				<li onclick="openUi('2')"><img src="img/z-2.jpg"><span>社会信息</span></li>
				<ul id="2" style="display: none;">
					<li><img src="img/z-top.gif">美容品与饰品代理</li>
					<li><img src="img/z-top.gif">考研资料市场</li>
					<li><img src="img/z-top.gif">商海纵横</li>
					<li><img src="img/z-top.gif">动物保护者</li>
					<li><img src="img/z-top.gif">动物世界</li>
					<li><img src="img/z-end.gif">中国风·神州各地</li>
				</ul>
				<li onclick="openUi('3')"><img src="img/z-3.jpg"><span>休闲娱乐</span></li>
				<ul id="3" style="display: none;">
					<li><img src="img/z-top.gif">ASCIIart全国转信</li>
					<li><img src="img/z-top.gif">七彩水木</li>
					<li><img src="img/z-top.gif">网友聚会</li>
					<li><img src="img/z-top.gif">醉品人生</li>
					<li><img src="img/z-top.gif">花木园艺</li>
					<li> <img src="img/z-end.gif">祝福</li>
				</ul>
				<li onclick="openUi('4')"><img src="img/z-4.jpg"><span>电脑技术</span></li>
				<ul id="4" style="display: none;">
					<li><img src="img/z-top.gif">BBS安装管理</li>
					<li> <img src="img/z-top.gif">CAD技术</li>
					<li><img src="img/z-top.gif">数字图像设计</li>
					<li> <img src="img/z-top.gif">电脑音乐制作</li>
					<li> <img src="img/z-top.gif">软件加密与解密</li>
					<li><img src="img/z-end.gif">计算机体系结构</li>
				</ul>
			</ul>
		</div>
		
		<script type="text/javascript">
		var ou;
		var oul;
		var id;
		
			
			
			function openUi(id){
				ou=document.getElementById(id);
				oul=ou.style.display;
				if(oul=='none'){
					// 显现
					ou.style.display='block';
				}else{
					// 隐藏
					ou.style.display='none';
				}
			}
			// 获取字体标签
			
			var spa = document.querySelectorAll('span');
			
			for(var i=0;i<spa.length;i++){
				// 获取当前选中的值
				spa[i].setAttribute('index',i);
				//鼠标一上去
				spa[i].onmouseover=function(){
				 //鼠标移动到某个下标
					spa[this.getAttribute('index')].className='act';
				}
				// 失去鼠标
				spa[i].onmouseout=function(){
					spa[this.getAttribute('index')].className='';
				}
				
			}
		</script>
		
	</body>
</html>

全选框


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		table{
			width: 500px;
			margin-top: 10px;
			margin-right: auto;
			margin-bottom: 0px;
			border-radius: 1px solid #666666;
			border-bottom: 1px solid #666666;
			
		}
			td{
				text-align: center;
				/* 每个td标签的距离间距 */
				line-height: 24px;
				font-size: 13px;
				border-radius: 1px solid #666666;
				border-bottom: 1px solid #666666;
			}
		</style>
		
		
	
	</head>
	<body >
		<table border="" cellspacing="0" cellpadding="0" align="center">
		<tr style="font-weight: bold;">
			<td ><input type="checkbox" name="" id="all" value="全选" />全选</td>
			<td>产品名称</td>
			<td>价格（元）</td>
			<td>数量</td>
		</tr>
		<tr>
			<td><input name="ic" type="checkbox" name="" id="" value="" /></td>
			<td>洛基亚N85手机</td>
			<td>2589</td>
			<td>6</td>
		</tr>
		<tr>
			<td><input name="ic" type="checkbox" value="佳能"" /></td>
			    <td>佳能IXUS95ISY数码相机</td>
			    <td>1865</td>
			    <td>5</td>
		</tr>
		<tr>
		<td><input name="ic" type="checkbox" value="戴尔"  /></td>
		    <td>戴尔新版SK8115键盘</td>
		    <td>60</td>
		    <td>56</td>
		</tr>
		<tr>
			 <td><input name="ic" type="checkbox" value="联想"  /></td>
			    <td>联想折叠式笔记本电脑桌</td>
			    <td>59</td>
			    <td>10</td>
		</tr>
		<tr>
			<td><input name="ic" type="checkbox" value="康佳"  /></td>
			    <td>康佳32英寸液晶电视</td>
			    <td>2945</td>
			    <td>3</td>
		</tr>
		<tr>
		<td  ><input name="ic" type="checkbox" value="九阳" /></td>
		    <td>九阳JYDX-78D五谷系列豆浆机</td>
		    <td>299</td>
		    <td>8</td>
		</tr>
		
		<tr >
			<!-- font-weight:bold 字体加粗 -->
			<td colspan="4"  style="text-align:left; font-weight:bold; padding-left:15px;" >删除选中商品</td>
		</tr>
		</table >
		
		<script>
		var id=null;
		var fu;
	
	 
			id=document.getElementById("all");
			fu=document.getElementsByName("ic");
			
		
		//根据全选选项 判断是否选择
		id.onclick = function(){
			
			for(var i=0;i<fu.length;i++){
                        //随着全选框的状态而改变
				fu[i].checked =this.checked;
			}
			
		}
		
		//获取所有的多选框 同过name属性
		var eu=document.getElementsByName("ic");
		
		
		for(var i=0;i<eu.length;i++){
			console.log(eu);
			eu[i].onclick=function(){
				var flag=true;//假设全部选中的
				for(var i=0;i<eu.length;i++){
				if(eu[i].checked == false){
					flag=false;
					break;
				}
				}
				id.checked=flag;
			}
		}
		
		
		</script>
	</body>
</html>

点击改变


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{margin:0px;padding: 0px;list-style: none}
		#container{
			width: 512px;
			height: 302px;
			border: 1px solid red;
			margin: 0 auto;
		}
		#container .nav{
			width: 510px;
			height: 40px;
			border: 1px solid blue;
		}
		#container .content{
			width: 510px;
			height: 260px;
			border: 1px solid yellow;	
		}
		ul li{
			float: left;
			width: 100px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			border: 1px solid orange;
		}
		.active{
			background-color: red;
			color: yellow;
		}
		.content div{
			display: none;
		}
	</style>
</head>
<body>
	<div id="container">
		<div class="nav">
			<ul>
				<li class="active">等延康</li>
				<li>杨文广</li>
				<li>刘翔杨</li>
				<li>六开封</li>
				<li>写开进</li>
			</ul>
		</div>
		<div class="content">
			<div style="display: block">这是等延康的个人简介</div>
			<div>杨文广........</div>
			<div>刘翔杨</div>
			<div>六开封</div>
			<div>写开进</div>
		</div>
	</div>

	<script type="text/javascript">
		//获取页面上所有的li标签
		var oLis = document.getElementsByTagName('li');
		//content
		var content = document.querySelector('.content');
		var oDivs = content.querySelectorAll('div');
		console.log(oDivs);
		// console.log(oLis);
		for(var i = 0;i<oLis.length;i++){
			//循环时  可以根据自定义索引设置值
			//setAttribute();设置标签的属性值
			//getAttribute() 获取属性的值
			oLis[i].setAttribute('index',i);//index
			oLis[i].onclick = function(){
				console.log(this.getAttribute('index'));
				// console.log(this.innerHTML);
				//排它思想
				//将所有的li标签上的样式全部清空
				for(var i = 0;i<oLis.length;i++){
					//className 设置css类选择器
					oLis[i].className = '';
				}
				//清空样式后，可以根据this获取当前点击的li
				// console.log(this.innerHTML)	
				this.className = 'active';	
				// alert(i);
				//
				for(var i = 0;i<oDivs.length;i++){
					oDivs[i].style.display = 'none';
				}
				oDivs[this.getAttribute('index')].style.display = 'block';
			};
		}
	</script>

</body>
</html>