JS列表切换效果如何实现?

JavaScript016

JS列表切换效果如何实现?,第1张

现在大多数列表切换都是把<div style="display:block"></div> 这个div的display设置为none或block来实现的,就是你点击一个列表的时候这个列表所要表现的div的display变为block,其他的设置为none,所以看到了这个列表的东西反之亦然

<select name="r_house" id="r_house">

<option value="选项1">选项1</option>

<option value="选项2" selected>选项2</option><!--如果想直接在html中选定某项,给该项加个selected属性即可,不需要编程-->

<option value="选项3">选项3</option>

<option value="选项4">选项4</option>

<option value="选项5">选项5</option>

<option value="选项6">选项6</option>

</select>

<script>

window.onload=function(){

 //如果一定要js代码实现,可以这样:

 //方法一(假定选定第3项,下同):

 r_house.value="选项3"

 //方法二:

 r_house.options[2].selected=true

 //方法三:

 r_house.children[2].selected=true

 //方法四:

 r_house.getElementsByTagName("option")[2].selected=true

 //方法五:

 r_house.querySelectorAll("option")[2].selected=true

 //还有N多种方法此略

}

</script>

/*

/**

/**

/*

/**

/**

/**

/**

/**

// 第一个元素索引

function front() {

this.pos = 0

}

// 最后一个元素的索引

function end() {

this.pos = this.listSize-1

}

// 向前移一个索引

function prev() {

if(this.pos==0){

return this.pos = 0

}

--this.pos

}

// 向后移一个索引

function next() {

if(this.pos<this.listSize-1){

++this.pos

}

}

// 当前的索引位置

function currPos() {

return this.pos

}

/**

/**

// 是否可以移到下一个索引位置

function hasNext() {

return this.pos<this.listSize

}

// 是否可以移到上一个索引位置

function hasPrev() {

return this.pos>=0

}

使用方法

var names = new List()

names.append('zhangsan')

names.append('lisi')

names.append('wangwu')

names.front()

names.next()

console.log(names.getElement()) // lisi

使用迭代器访问列表

for(names.front()names.hasNext()names.next()){

console.log(names.getElement())

}

//zhangsan lisi wangwu