<!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>
1 回答
IT自学
TA贡献16条经验 获得超25个赞
谢邀，只想说写的好乱的代码：
补充一句，按照加载顺序写的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了，伙计，有点心急啊，基础都没打牢，有点不会走就想跑的感觉，建议先打好基础，再看框架吧。
我一个只是业余学习代码的人都看出这么多基础性的问题，不是打击你，如果去应聘，估计你要考这样的水平去面试，根本没戏，除非那个企业也是业余二流。
点击展开后面2条
- 1 回答
- 0 关注
- 1480 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消