龙空技术网

jQuery第三十九天练习

轻鸟545 149

前言:

现在你们对“jquery为ul添加多个li”大致比较关切,小伙伴们都需要分析一些“jquery为ul添加多个li”的相关文章。那么小编在网上收集了一些有关“jquery为ul添加多个li””的相关知识,希望各位老铁们能喜欢,朋友们一起来学习一下吧!

CSS:

* {     padding:0; margin:0;}body {     font-size:12px;     padding:100px;}ul { list-style-type:none;}ul li {     float:left;     width:15px;     height:15px;     margin-right:10px;     cursor:pointer;     display:block;     overflow:hidden;     background-image:url(../images/demo14_bg.gif);}#demo14_skin_1 { background-position:0 0;}#demo14_skin_2 { background-position:-25px 0;}#demo14_skin_3 { background-position:-50px 0;}#demo14_skin_1.selected { background-position:0 -16px;}#demo14_skin_2.selected { background-position:-25px -16px;}#demo14_skin_3.selected { background-position:-50px -16px;}.box {     width:1000px;     clear:both;     height:500px;     margin-top:30px;     border:1px solid #fff;}
body { background:red;}.box { background:url(../images/red.PNG);}
body { background:green;}.box { background:url(../images/green.PNG);}
body { background:blue;}.box { background:url(../images/blue.PNG);}

Html:

<html ><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" type="text/css" href="css/demo14.css"/><link rel="stylesheet" type="text/css" href="css/demo14_skin_1.css" id="cssfile"/><script src="js/jquery-3.4.1.min.js"></script><script type="text/javascript">    $(document).ready(function(){	    $("li").click(function(){			$("#"+this.id)                .addClass("selected")                .siblings()                .removeClass("selected");							$("#cssfile").attr("href","css/"+this.id+".css");		});	});</script></head><body>    <ul>        <li id="demo14_skin_1" class="selected"></li>        <li id="demo14_skin_2"></li>        <li id="demo14_skin_3"></li>    </ul>    <div class="box"></div></body></html>

标签: #jquery为ul添加多个li