亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

為什么點擊顏色的li 高度變化

為什么點擊顏色的li 高度變化

啊啊啊啊123 2017-01-31 10:43:37
<!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了,伙計,有點心急啊,基礎都沒打牢,有點不會走就想跑的感覺,建議先打好基礎,再看框架吧。

我一個只是業余學習代碼的人都看出這么多基礎性的問題,不是打擊你,如果去應聘,估計你要考這樣的水平去面試,根本沒戲,除非那個企業也是業余二流。

查看完整回答
反對 回復 2017-01-31
  • 啊啊啊啊123
    啊啊啊啊123
    首先關于jq的加載寫法我附圖了,其次少的class不是我沒寫而是這個復制過來自己丟掉的而且格式都亂了 ?,F在你考過去試試能不能運行!
  • IT自學
    IT自學
    可以運行了,說的不對的地方,請多理解了,業余水平,呵呵。 和你說的一樣,出現了點擊后,被點擊的按鈕下滑了,這是因為,含有文本內容(含文本符號)的塊元素(如li)在inline-block之后,會觸發li元素的一個屬性vertical-align,觸發后,默認的vertical-align屬性值為:baseline,就是按照文本的基線對齊,需要修改一下屬性值就可以,修改為按頂部對齊(top)即可,這樣點擊就不會出現下滑現象了。 下面就是修改后的代碼,去多了多余的盒子box1,去掉了頁面載入事件。
  • IT自學
    IT自學
    #box .color li{ display: inline-block; margin: 10px; width: 20px; height: 20px; vertical-align: top; }
點擊展開后面2
  • 1 回答
  • 0 關注
  • 1513 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號