为什么点击颜色的li 高度变化
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.news li{
list-style-type: none;
display: inline-block;
background-color: #666;
padding: 10px;
}
#box{
width: 200px;
margin: 0 auto;
}
#box .color li{
display: inline-block;
margin: 10px;
width: 20px;
height: 20px;
}
#box .color li:nth-child(1){
background-color: red;
}
#box .color li:nth-child(2){
background-color: yellow;
}
#box .color li:nth-child(3){
background-color: blue;
}
#box .color li:nth-child(4){
background-color: pink;
}
.it:before{
content: "√";
}
</style>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<div id="box">
<div id="box1">
<ul class="color">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<ul class="news">
<li>时事新闻</li>
<li>娱乐新闻</li>
</ul>
</div>
</body>
<script>
$().ready(function () {
$(".color>li").click(function () {
$(this).addClass("it").siblings().removeClass("it");
console.log($(this).css("backgroundColor"));
var bgc = $(this).css("backgroundColor");
$(".news>li").css("backgroundColor", bgc)
})
})
</script>
</html>
啊啊啊啊123浏览 1485回答 1
1回答
-
IT自学
谢邀，只想说写的好乱的代码：补充一句，按照加载顺序写的js代码，是不需要加页面载入事件的，有点多此一举。JQ页面载入事件，是你独创的吗？我见过这样载入的：$(document).ready(functin(){ //代码部分})还有这样载入的： jQuery(document).ready(function(){ //代码部分}) 还有这样载入的：$(function(){ //代码部分})和这样载入的：jQuery(function(){ //代码部分})对比了一下，您的载入方法和第一种最像，那么document被吃掉了？ 再就是，你的类名color在哪个元素上呢？老大$(".color>li")就这句，我怀疑它怎么可能运行，类名color都没有被加上，你点击怎么会有效果？还有设置单个CSS属性的JQ语法是：$().css("属性","属性值")，下面这句代码几个意思？$(".news>li").css("backgroundColor", bgc)我看了你的代码，感觉你JS好像也学的不扎实，直接奔JQ了，伙计，有点心急啊，基础都没打牢，有点不会走就想跑的感觉，建议先打好基础，再看框架吧。我一个只是业余学习代码的人都看出这么多基础性的问题，不是打击你，如果去应聘，估计你要考这样的水平去面试，根本没戏，除非那个企业也是业余二流。
随时随地看视频慕课网APP
CSS3
Html/CSS