js动态绑定制作下拉列表
2016-10-21 13:49
302 查看
本文为博主原创,更多好文章请点击这里
首先我们可以利用javascript脚本,调用对应列表的id来实现动态效果的展示,但是,如果遇到像淘宝一样的网站,他的菜单比较多的情况的时候,我们通过动态绑定的方式就比较麻烦了。
所以,今天给大家介绍一个可以动态设置方式
同时你要设置你的
通过js获取
然后动态给每个
再次循环便利数组,将每一个
找到正在操作的
下面我们来看看代码的实现
本文为博主原创,更多好文章请点击这里
首先我们可以利用javascript脚本,调用对应列表的id来实现动态效果的展示,但是,如果遇到像淘宝一样的网站,他的菜单比较多的情况的时候,我们通过动态绑定的方式就比较麻烦了。
所以,今天给大家介绍一个可以动态设置方式
首先我们先来准备下啦列表
在Html中建立对应的列表元素,如下<ul> <li > <a href="#"> 首页</a> <dl style="display: none" id="content-0"> <dt><a href="#">行业新闻</a></dt> <dt><a href="#">公司新闻</a></dt> <dt><a href="#">国内动态</a></dt> </dl> </li> <li> <a href="#"> 企业新闻</a> <dl style="display: none" id="content-1"> <dt><a href="#">行业新闻</a></dt> <dt><a href="#">公司新闻</a></dt> <dt><a href="#">国内动态</a></dt> </dl> </li> </ul>
同时你要设置你的
<li>标签下的
<dl>标签的display设置成none(就是把dl整个框架隐藏起来)
接着我们可以来写js代码了
写代码之前,我们先来了解下实现原理通过js获取
<li>标签的一个集合
然后动态给每个
<li>标签添加一个index(下标)
再次循环便利数组,将每一个
<dl>标签的css属性置空(如果没有用到css可以忽略)或者将原文的style标签下的display再次重新设置成none
找到正在操作的
<li>标签节点,修改他的css属性或者display属性
下面我们来看看代码的实现
<script type="text/javascript"> window.onload = function () { // 1. 获取所有选项卡LI标签 var olis = document.getElementsByTagName("li"); // 2. 循环便利所有的标签 for(var i=0; i<olis.length; i++){ // 3. 给每个li标签添加一个index olis[i].index = i; // 4. 动态绑定 olis[i].onmouseover = function () { // 5. 再次循环遍历 或者 找到要操作的层或列表 for(var j=0; j<olis.length; j++){ // olis[j].getElementsByTagName("dl")[0]; // 6. 清除和隐藏所有元素的className和div/dl层 // odl.style.display = "block"; document.getElementById("content-"+j).style.display = "none"; } // 7. 显示选项卡对应的DIV document.getElementById("content-"+this.index).style.display="block"; } } } </script>
本文为博主原创,更多好文章请点击这里
相关文章推荐
- c# winform comboBox动态下拉列表,comboBox动态绑定数据库里的数据
- # winform comboBox动态下拉列表,comboBox动态绑定数据库里的数据
- 关于js动态向下拉列表中添加数据
- 动态绑定下拉列表
- 下拉列表,选中某个值通过js动态生成一个文本框,javascript,text
- js实现带有搜索框的可多选的动态下拉列表
- html+js+PHP(使用了smarty模板技术)+mysql实现二级动态下拉列表(select)
- js入门·表单元素(select下拉列表)制作二级联动菜单和网站导航 .txt
- js动态生成级联下拉列表
- JS制作年月日下拉列表
- js实现根据下拉列表动态改变其他层
- js 动态生成下拉列表 下拉列表级联
- js控制select数据绑定下拉列表
- 下拉列表的动态绑定(2种)
- 用js+jsp实现在同一个下拉列表中,动态生成多级select选项
- 如何动态增加下拉框列表,下拉框里的内容从js数组里得来?
- js--dom--动态生成【下拉列表】
- UGUI制作动态的下拉列表
- js动态给下拉列表赋值
- html+js+PHP(使用了smarty模板技术)+mysql实现二级动态下拉列表(select)