<!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了，伙計，有點心急啊，基礎都沒打牢，有點不會走就想跑的感覺，建議先打好基礎，再看框架吧。
我一個只是業余學習代碼的人都看出這么多基礎性的問題，不是打擊你，如果去應聘，估計你要考這樣的水平去面試，根本沒戲，除非那個企業也是業余二流。
-
啊啊啊啊123首先關于jq的加載寫法我附圖了，其次少的class不是我沒寫而是這個復制過來自己丟掉的而且格式都亂了 ?，F在你考過去試試能不能運行！ -
IT自學可以運行了，說的不對的地方，請多理解了，業余水平，呵呵。 和你說的一樣，出現了點擊后，被點擊的按鈕下滑了，這是因為，含有文本內容（含文本符號）的塊元素（如li）在inline-block之后，會觸發li元素的一個屬性vertical-align,觸發后，默認的vertical-align屬性值為：baseline,就是按照文本的基線對齊，需要修改一下屬性值就可以，修改為按頂部對齊（top）即可，這樣點擊就不會出現下滑現象了。 下面就是修改后的代碼，去多了多余的盒子box1，去掉了頁面載入事件。
-
IT自學#box .color li{ display: inline-block; margin: 10px; width: 20px; height: 20px; vertical-align: top; }
點擊展開后面2條
- 1 回答
- 0 關注
- 1513 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消