jquery动态添加下拉框选项设置下拉框样式怎么做啊

jquery动态添加下拉框选项设置下拉框样式怎么做啊,第1张

1、添加下拉框选项并设置样式

function addOption(){

     $("#下拉框的id").append( "<option value=\"1\">选项一</option>" )

     $("#下拉框的id").append( "<option value=\"1\">选项二</option>" )

     //可以宏竖一个一个添加,蔽碧大也可以遍历要添加的数据循环添加

     

    //两种方式设置样式

    //1、直接设置下拉框的css

    $("#下拉框的id").css({"widht":"20px","height":"10px"})

    

    

    //2、或慧李者写好css样式动态添加class

    //css文件或者标签里写好css样式如:.option{width:20pxheight:10px}

    $("#下拉框的id").addClass("option")

}

1)使用一个大盒子(div 将元素都装起来

2)盒子中使用2个无序标签分别搭建选项卡头部与内容

图例:

1)消除网页兄卜(盒子 默认边距

2)若无序列表中使用li标签,需要给ul添加d性盒子属性(方法不唯一)

3)给每个li标签添加鼠标cursor: pointer(鼠标指针小手)属性

4)为标题盒子(ul class=title)里的第一个子元素(li)添加颜色样式(默认为第一个子元素

5)给所有的内容陆橘盒子(ul class=content)添加此元素不会被显示的属性(display:none)

6)给内容盒子里的第一个元素添加 显示为块级元素(display: block)

图例:

点击相应的标题会显示相应的内容

1)引入jquery框架

2)获取标题(ul)中的每一项(li),并且为他们注册点击事件(-

3)点击事件里先移除之前的高亮标题样式,添加当前当前的高亮标题样式

(根据this指针的指向来添加和移除样式)

4)获取内容盒子的第一项元素

5)移除之前显示内容的样式,添加当前显示内容的样式

(根据this指针的指向来添加和移除样式,使用eq方法根据this的指向找到对应元素的索引)

注意:eq() 方法将匹配元素集缩减值指定 index 上的一个。

图羡悉穗例:

总结:使用jquery方法需注意:

this的指向性问题与选择器的使用问题


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11981402.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存