脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → span标签的是否隐藏属性

JS 如果改变span标签的是否隐藏属性

 更新时间：2011年10月06日 23:15:59   作者：  
JS 如果改变span标签的是否隐藏属性,大家根据需要选择使用。
测试：
test.html
代码：

复制代码 代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript" src="js/Menu.js"></SCRIPT>
</HEAD>
<BODY>
<table>
<tr>
<td>
<form method="post" action="#">
查询类型<select id="selectType" name="selectType" onchange="isChang1(this.value)">
<option value="yxsh">按院系</option>
<option value="zgh">职工号</option>
<option value="xm">姓名</option>
</select>
<span id="yxsh" style=display:>院系
<select id="depart" name="depart">
<option value="all">所有院系</option>
<option value="123">123</option>
<option value="123">123</option>
<option value="123">123</option>
<option value="123">123</option>
<option value="123">123</option>
</select>
课程分配
<select id="isAll" name="isAll">
<option value="all">所有</option>
<option value="NO">未分配</option>
<option value="YES">已分配</option>
</select>
</span>
<span id="key" style=display:none>
<input type="text" name="keyword" id="keyword"/>
</span>
<input type="submit" value="查询"/>
</form>
</BODY>
</HTML>

js/Menu.js
代码：
复制代码 代码如下:

//这是用了自定义的方法hideElement()和shwoElement()
function isChang(values)
{
if(values=="yxsh"){
hideElement("key");
showElement("yxsh");
}else{
hideElement("yxsh");
showElement("key");
}
}
//自定义方法hideElement()
function hideElement(id){
document.getElementById(id).style.display="none";
}
//自定义方法showElement()
function showElement(id){
document.getElementById(id).style.display="";
}
//这是不用自定义函数直接设置是否隐藏
function isChang1(values)
{
if(values=="yxsh"){
document.getElementById("yxsh").style.display="";
document.getElementById("key").style.display="none";
}else{
document.getElementById("yxsh").style.display="none";
document.getElementById("key").style.display="";
}
}

测试结果：
其默认选择是：按院系
这是如果我们选择的是：不按院系，即按：职工号或姓名，那么，
这时就会隐藏：
<span id="yxsh" style=display:none>...</span>
并且<span id="key" style=display:>...</span>
如果我们是选择：按院系，即默认情况下
那么，结果是：
<span id="yxsh" style=display:>...</span>
并且<span id="key" style=display:none>...</span>
您可能感兴趣的文章:

相关文章

  • javascript实现回到顶部特效

    javascript实现回到顶部特效

    当页面特别长的时候，用户想回到页面顶部，必须得滚动好几次滚动键才能回到顶部，如果在页面右下角有个“返回顶部”的按钮，用户点击一下，就可以回到顶部，对于用户来说，是一个比较好的体验。
    2015-05-05
  • JS实现"上次操作未完成禁止新操作"逻辑特事特办方案

    JS实现"上次操作未完成禁止新操作"逻辑特事特办方案

    这篇文章主要介绍了详解JS如何实现"上次操作未完成禁止新操作"的逻辑及思路,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-05-05
  • 一文详解javascript语言中的类(class)

    一文详解javascript语言中的类(class)

    class类是一种抽象的体现,用来表示具有相同特性的一类事物,是面向对象编程不可缺少的工具,下面这篇文章主要介绍了javascript语言中类class的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-04-04
  • 微信小程序引入模块中wxml、wxss、js的方法示例

    微信小程序引入模块中wxml、wxss、js的方法示例

    这篇文章主要介绍了微信小程序引入模块中wxml、wxss、js的方法示例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 详解JS截取字符串的三个方法substring,substr,slice

    详解JS截取字符串的三个方法substring,substr,slice

    js中有三个截取字符的方法，分别是substring()、substr()、slice()，平时我们可能都用到过，但总是会对这些方法有点混淆。本文将详细介绍一下这三者的区别，需要的可以参考一下
    2022-03-03
  • JavaScript实现数组随机排序的方法

    JavaScript实现数组随机排序的方法

    这篇文章主要介绍了JavaScript实现数组随机排序的方法,涉及javascript数组遍历与排序的相关技巧,需要的朋友可以参考下
    2015-06-06
  • JavaScript实现鼠标滑过图片变换效果的方法

    JavaScript实现鼠标滑过图片变换效果的方法

    这篇文章主要介绍了JavaScript实现鼠标滑过图片变换效果的方法,涉及javascript控制鼠标事件及样式变换的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • JavaScript详解使用Promise处理回调地狱与async await修饰符

    JavaScript详解使用Promise处理回调地狱与async await修饰符

    这篇文章主要介绍了JavaScript使用Promise处理回调地狱与async await修饰符，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JavaScript数组去重的几种方法

    JavaScript数组去重的几种方法

    这篇文章主要给大家介绍了关于JavaScript数组去重的几种方法，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-04-04
  • Javascript中的对象和原型(二)

    Javascript中的对象和原型(二)

    这篇文章给大家介绍了js中的对象和原型，从工厂模式，构造函数方面展开话题，介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下
    2016-08-08

最新评论