`
easy0917
  • 浏览: 260430 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

控制 html元素 显示/隐藏

    博客分类:
  • JS
 
阅读更多
1。编写js函数
<script type="text/javascript">
function display(y){$(y).style.display=($(y).style.display=="none")?"":"none";} 
function $(s){return document.getElementById(s);}
 </script>

2. 要显示/隐藏的html元素加上 id 属性

<table>
   <tr id="menu" >   
      <td>控制这个tr的显示/隐藏</td>
  </tr>
</table>

3,添加按钮,链接等触发 js 函数

<input type="button" onclick="display('menu')"  value="显示/隐藏"/>
<a href="#"  onclick="display('menu')"  >显示/隐藏</a>

javascript显示隐藏层<div id="layer" style="display:none;">广告</div>
<input type="botton" onclick="display(layer)">


二:javascript控制页面控件隐藏显示的两种方法

javascript控制页面控件隐藏显示的两种方法,方法的不同之处在于控件隐藏后是否还在页面上占位
方法一:
document.all["PanelSMS"].style.visibility="hidden"; 
document.all["PanelSMS"].style.visibility="visible";
方法二:
document.all["PanelSMS"].style.display="none"; 
document.all["PanelSMS"].style.display="inline";
方法一隐藏后 页面的位置还被控件占用 只是不显示 
方法二隐藏后 页面的位置不被占用 


分享到:
评论

相关推荐

    javascript 控制 html元素 显示/隐藏实现代码

    总结来说,JavaScript提供了强大的能力来控制HTML元素的显示状态,可以使用display属性和visibility属性来达到不同的显示/隐藏效果。开发者可以根据需要选择合适的方法来实现元素的隐藏和显示,从而提供更加动态的...

    js 显示/隐藏某些列

    - `style.display`属性:通过设置`style.display = 'none'`来隐藏元素,或者`style.display = 'table-cell'`(对于表格元素)或`style.display = 'block'`(对于非表格元素)来显示它。 - `classList`接口:可以...

    静态菜单显示/隐藏代码

    - `disAndMinMenu()`: 控制菜单的显示与隐藏,通过修改`divMenu`的宽度和`display`属性来实现。 - `$()`: 用于获取DOM元素的快捷函数,类似于jQuery中的选择器。 ### 三、HTML结构与事件处理 #### 3.1 表格嵌套...

    js控制隐藏显示table特定列

    知识点 6:使用 HTML 元素的属性来控制 TABLE 的显示和隐藏 在上面的代码中,我们使用了 HTML 元素的 `checked` 属性来控制 Checkbox 的状态。当 Checkbox 被选中时,`checked` 属性将被设置为 `true`,否则将被...

    控制Div显示和隐藏

    本程序在网页中设计了Div层的显示和隐藏,代码简单、实用。

    6种css3和js显示/隐藏侧边栏效果

    4. **定位(Positioning)**:使用`position`属性(如`relative`、`absolute`或`fixed`)配合`top`、`bottom`、`left`、`right`来控制侧边栏相对于其正常文档流的位置,从而实现从四个方向的隐藏和显示。 其次,...

    通过按钮控制框架的显示与隐藏

    本文档详细介绍了如何使用JavaScript来实现对框架内元素的动态显示与隐藏。 #### 文件结构概览 提供的代码片段包含两个HTML文件:`index.html` 和 `main.html`。`index.html` 是主页面,定义了整个框架布局;而 `...

    asp.net客户端控制框架的显示或隐藏

    在ASP.NET开发中,客户端控制框架的显示或隐藏是一个常见的需求,这主要涉及到网页的动态交互和用户体验的优化。本文将深入探讨如何使用JavaScript来实现这一功能,特别适合那些正在学习ASP.NET的初学者。 首先,...

    【JavaScript源代码】jQuery实现HTML元素隐藏和显示.docx

    // 隐藏元素显示 $("li:gt(5):lt(6)").show(); // 更新按钮样式和文本 $(".showmore a span").css("background", "url(img/up.gif) no-repeat 0 0"); $(".showmore a span").text("显示部分语言"); } else { ...

    js/jquery实现的指定元素的隐藏显示

    "js/jquery实现的指定元素的隐藏显示"这一主题涵盖了如何利用这两种强大的工具来改变HTML元素的显示状态,以及如何处理文本内容的变化。以下是关于这些知识点的详细说明。 首先,让我们了解一下JavaScript的基础...

    ajax控制div窗口显示和隐藏

    本主题主要关注如何使用Ajax来控制div窗口的显示和隐藏,这对于实现交互式用户体验至关重要。 一、Ajax基础 Ajax的核心是JavaScript对象XMLHttpRequest,它在后台与服务器进行通信,实现了异步数据传输。创建一个...

    JS控制HTML元素的显示和隐藏的两种方法

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位。  方法一: document.getElementById("EleId").style.visibility=...

    点击元素以外的地方隐藏元素插件

    在IT行业中,jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。...在实际项目中,它能有效提升网页的交互性和可用性,特别适合需要动态显示和隐藏元素的场景。

    隐藏与显示事件

    在标题“隐藏与显示事件”中,我们关注的是如何通过编程控制UI元素的可见性,使得用户能够根据需求查看或隐藏特定内容。这种技术在电子商务网站、应用程序和其他互动式平台中尤其常见,例如在描述中提到的场景:点击...

    点击图片 或某一个设置可以控制某一个区域隐藏还是显示(ajax 控制)

    #### 一、Ajax 控制页面元素显示与隐藏的基本概念 **Ajax**(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据交换,Ajax 可以使...

    JS 隐藏同级的元素后只显示JS文件

    1. DOM操作:选择、遍历和修改HTML元素。 2. CSS属性操作:通过JavaScript改变`style.display`属性以控制元素的可见性。 3. 事件处理:添加事件监听器响应用户的操作。 4. 异步请求(可选):如果涉及加载外部JS文件...

    JS显示隐藏HTML控件

    这就是"JS显示隐藏HTML控件"这一主题所涉及的核心内容。通过JavaScript,我们可以实现对HTML元素的显示和隐藏,以提升用户体验和页面的动态性。 1. **基本概念** - HTML控件:HTML中的表单元素如`&lt;input&gt;`, `...

    Div显示与隐藏网页制作

    这是隐藏/显示的内容&lt;/div&gt; function toggleMyDiv() { $('#myDiv').toggle(); } &lt;/script&gt; ``` 在这个例子中,当用户点击按钮时,`Div`的内容将切换其可见状态。 在"Div显示与隐藏.txt"这个文件中,可能包含了...

    VUE元素的隐藏和显示(v-show指令)

    v-show="true/false" //控制元素显示/隐藏 示例代码: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;meta charset="utf-8"&gt; [removed][removed] &lt;script

Global site tag (gtag.js) - Google Analytics