会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132776个问题
JAVA 全系列/第五阶段:JavaWeb开发/Web实战案例 36556楼
Python 全系列/第十二阶段:Python_Django3框架/Django初级 36557楼

<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .box {

            width: 100%;

            height: 50px;

            background-color: gray;

        }


        .nav {

            width: 80%;

            height: 50px;

            margin: 0 auto;

            line-height: 50px;

        }


        .nav ul li {

            list-style: none;

            float: left;

            padding: 0 30px;

        }


        .nav ul li a {

            text-decoration: none;

            font-size: 20px;

            color: red;

        }

    </style>

    <style>

        @media screen and(max-width:916px) {

            .liu {

                display: none;

            }

        }


        @media screen and(min-width:916px) {

            .liu {

                display: block;

            }

        }

    </style>

</head>


<body>

    <div class="box">

        <div class="nav">

            <ul>

                <li><a href="#">首页1</a></li>

            </ul>

            <ul>

                <li><a href="#">首页2</a></li>

            </ul>

            <ul>

                <li><a href="#">首页3</a></li>

            </ul>

            <ul>

                <li><a href="#">首页4</a></li>

            </ul>

            <ul>

                <li class="wu"><a href="#">首页5</a></li>

            </ul>

            <ul>

                <li class="liu"><a href="#">首页6</a></li>

            </ul>

        </div>


    </div>

</body>


</html>

能这样隐藏其中一个li标签吗?

WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS3新特性 36558楼
JAVA 全系列/第十一阶段:分布式RPC调用和分布式文件存储/Dubbo 36561楼
JAVA 全系列/第六阶段:项目管理与SSM框架/SpringMVC旧 36563楼

html代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/jd.css" />
		<script type="text/javascript" src="js/jd.js"></script>
	</head>
	<body>

		<!--导航栏开始-->
		<div class="nav">
			<div class="warp">
				<ul class="nav_ul1">
					<li><a href="">京东首页</a></li>
					<li><a href="">配送至:北京</a></li>
				</ul>
				
				<ul class="nav_ul2">
					<li><a href="">洋洋宝贝</a><span>|</span></li>
					<li><a href="">我的订单</a><span>|</span></li>
					<li><a href="">我的京东</a><span>|</span></li>
					<li><a href="">京东会员</a><span>|</span></li>
					<li><a href="">企业采购</a><span>|</span></li>
					<li><a href="">京东手机</a><span>|</span></li>
					<li><a href="">关注京东</a><span>|</span></li>
					<li><a href="">客户服务</a><span>|</span></li>
					<li><a href="">网址导航</a></li>
				</ul>
			</div>
		</div>
		<!--导航结束-->
		
		<!--搜索框开始-->
		<div class="search">
			
			<div class="warp">
				
				<img src="img/1.png" />
				
				<div class="search_div">
					<input type="text"  class="search_text"/>
					
					<input type="button" value="搜索" class="search_but"/>
					
				</div>
			</div>
		</div>
		<!--搜索框结束-->
		
		<!--标题开始-->
		<div class="title warp">
			<h3>全部商品</h3>
			<div>
				<span>配送至: </span>
				<select>
					<option>灞桥区</option>
					<option>莲湖区</option>
					<option>临潼区</option>
					<option>碑林区</option>
				</select>
			</div>
		</div>
		<!--标题结束-->
		
		<!--显示菜单的开始-->
		<div class="tips warp">
			<ul>
				<li>
					<input type="checkbox"  name="fav" id="all"
						onclick="checkTest1(this)" /> 全选
				</li>
				<li>商品</li>
				<li>单价</li>
				<li>数量</li>
				<li>小计</li>
				<li>操作</li>
			</ul>
		</div>
		<!--显示菜单的结束-->
		
		<!--商品详情展示开始-->
		<div class="info warp">
			<ul>
				<li><input type="checkbox" name="fav" onclick="checkTest2()" /</li>
				<li><img src="img/1.jpg" width="90px"/></li>
				<li><a>京东超市:长续航遥控飞机</a></li>
				<li><a>颜色:黑色</a></li>
				<li><a>¥182.5</a></li>
				<li> 
					<button>-</button>
					<input type="text" name="" id="" value="1" />
					<button class="but_1">+</button>
				</li>
				<li>¥182.5</li>
				<li>
					<a href="">删除</a><br  />
					<a href="">移到我的关注</a>
				</li>
			</ul>
		</div>

		<div class="info warp">
			<ul>
				<li><input type="checkbox"  name="fav" onclick="checkTest2()" /</li>
				<li><img src="img/3.jpg" width="90px"/></li>
				<li><a>京东超市:无线蓝牙耳机</a></li>
				<li><a>颜色:白色</a></li>
				<li><a>¥182.5</a></li>
				<li> 
					<button>-</button>
					<input type="text" name="" id="" value="1" />
					<button class="but_1">+</button>
				</li>
				<li>¥182.5</li>
				<li>
					<a href="">删除</a><br  />
					<a href="">移到我的关注</a>
				</li>
			</ul>
		</div>
		<div class="info warp">
			<ul>
				<li><input type="checkbox" name="fav"  onclick="checkTest2()" /</li>
				<li><img src="img/4.jpg" width="90px"/></li>
				<li><a>京东超市:西瓜雪糕</a></li>
				<li><a>颜色:红色</a></li>
				<li><a>182.5</a></li>
				<li> 
					<button onclick="checkTest3(this,1)">-</button>
					<input type="text" name="" id="" value="1" />
					<button class="but_1" onclick="checkTest3(this,2)">+</button>
				</li>
				<li>¥182.5</li>
				<li>
					<a href="">删除</a><br  />
					<a href="">移到我的关注</a>
				</li>
			</ul>
		</div>
		<!--商品详情展示结束-->
		<!--结算开始-->	
		<div class="balance warp">
			<ul class="balance_ul1">
				<li><input type="checkbox" name="fav" id="" value=""
					onclick="checkTest1()"/>全选</li>
				<li><a href="">删除选中商品</a></li>
				<li><a href="">移到我的关注</a></li>
				<li><a href="">清除下柜商品</a></li>
			</ul>
			
			<ul class="balance_ul2">
				<li>已经选择<span>1</span>件商品</li>
				<li>总价<span>$12</span></li>
				<li>
					<button class="butt">去结算</button>
				</li>
			</ul>
		</div>
		<!--结算结束-->
		
		
	</body>
</html>

js代码如下

var fav=document.getElementsByName("fav")
//判断是否全选
function checkTest1(th){
	var flag=th.checked
	
	//获得所有多选框对象
	
	
		for(var i in fav){
			
			fav[i].checked=flag
			
		}
}

//单选决定全选操作
function checkTest2(){
	
	var flag=true
	
	for (var i=1;i<fav.length-1;i++){
		
		if (!fav[i].checked){
			
			flag=false
			break
		}
	}
	
	fav[0].checked=flag
	fav[fav.length-1].checked=flag
}

//控制数量的增加或者减少
	function checkTest3(th,sig){
		
		
		if (sig=="1"){
			
		//获得下一个节点的对象
		var pre=th.nextElementSibling
		//获得节点的值
		
		if(Number(pre.value)>0){
		pre.value=Number(pre.value)-1 //因为pre.value是一个str 所以需要转成数字
		}	
			
		}else{
		
		//获得上一个节点的对象 
		var pre=th.previousElementSibling
		//获得节点的值
		pre.value=Number(pre.value)+1
		}
		
	// 计算每个商品的总价格
	// 获得每一个商品的单价
	
	var val=pre.parentNode.previousElementSibling.innerHTML
	
	//计算总价格
	
	var zong=Number(val)*Number(pre.value)
	
	//吧总的加个赋给指定的对象
	pre.parentNode.nextElementSibling.innerHTML="¥"+zong
			
	}
	
	

老师 我的这个计算总价格 一直显示NaN  我把单价里的美元符号删除了 还是不行 麻烦你看下

在html代码中 我的单击事件是在西瓜雪糕那块操作的 


还有一个问题 这个获取商品单价节点 用的是父节点的兄弟节点 为什么不能在html代码中在单价节点那里直接写一个id 然后用getElementById 这个直接获取   

Python 全系列/第七阶段:网页编程基础/JavaScript 36564楼
Python 全系列/第十三阶段:高并发性能怪兽-Tornado 框架/Tornado 深入学习(旧) 36568楼
JAVA 全系列/第八阶段:Linux入门到实战/Git 36569楼
Python 全系列/第四阶段:函数式编程和核心特性/python新特性 36570楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637