Jquery实现两个span隐藏和显示

html-css09

Jquery实现两个span隐藏和显示,第1张

首先你要获取文本框

2个span

的id或者样式:

$(function(){

var

Txt=$("文本框的样式或者id")

var

Span1=$("span1的样式或者id")

var

Span2=$("span2的样式或者id")

Txt.click(function(){

//点击文本框就判断文本框下的span1等于显示就隐藏span1然后显示span2

if(Span1.css("display")=="block"){

Span1.css("display“,"none")

Span2.css("display","block")

}

//如果你还要在点击就显示span1隐藏span2

else{

Span1.css("display“,"block")

Span2.css("display","none")

}

})

})

1、新建一个html文件,命名为test.html。

2、在test.html文件内,使用span标签创建一段文字的展示,并设置其id属性为tar。

3、在test.html文件内,再使用button标签创建两个按钮,一个显示按钮,另一个隐藏按钮。

4、在test.html文件内,给两个button按钮绑定onclick点击事件,当点击显示按钮时,执行on()函数,当点击隐藏按钮时,执行off()函数。

5、在test.html文件的js标签中,使用function声明一个on()函数,获得span对象,设置其display属性为block。

6、在test.html文件的js标签中,使用function声明一个off()函数,获得span对象,设置其display属性为none。

<select id="hehe">

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

<option value="2">2</option>

<option value="3" style="visibility:hidden">3</option>

<option value="4" style="visibility:hidden">4</option>

</select>

除开IE 其他的都能隐藏