js怎么控制a标签的显示和隐藏

JavaScript09

js怎么控制a标签的显示和隐藏,第1张

<HTML>

<HEAD>

<TITLE>New Document </TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

</HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!--

function show(){

document.getElementById("a").style.display = "none"

document.getElementById("b").style.display = "none"

}

function show_one(){

document.getElementById("a").style.display = "block"

document.getElementById("b").style.display = "block"

}

//-->

</SCRIPT>

<BODY>

<label type="text" id="a" value="姓名">姓名</label><input type="text" id="b"/><br>

<input type="button" value="隐藏" onclick="show()"/>

<input type="button" value="显示" onclick="show_one()"/>

</BODY>

</HTML>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">

<title>Document</title>

</head>

<body>

<a>其它相关</a>

  <ul class="nav-sort sort-last">

    <li><a href="" target='_blank'>子菜单1</a></li>

    <li><a href="" target='_blank'>子菜单2</a></li>

    <li><a href="" target='_blank'>子菜单3</a></li>

  </ul>

</body>

<!-- 引入jquery -->

<script src="libs/script/jquery.min.js"></script>

<script type="text/javascript">

  

  //把ul隐藏掉

  $('.nav-sort.sort-last').hide()

  

  //把 a 隐藏掉

  $('.nav-sort.sort-last').prev().hide()

</script>

</html>

利用来JS控制页面控件显示和隐藏有两种方法，两种方法分别利用HTML的style中的两个属性，两种方法的不同之处在于控件隐藏后是否还在页面上占空位。

方法一：

document.getElementById("EleId").style.visibility="hidden"'设置EleId标签隐藏

document.getElementById("EleId").style.visibility="visible"设置EleId标签显示

利用上述方法实现隐藏后，页面的位置还被控件占用，显示空白。

定义和用法

visibility 属性设置元素是否可见。

方法二：

document.getElementById("EleId").style.display="none"设置EleId标签隐藏

document.getElementById("EleId").style.display="inline"设置EleId标签显示

利用上述方法实现隐藏后，页面的位置不被占用。

定义和用法

display 属性设置元素如何显示。