原生js設置div隱藏或者顯示_10種JS控制DIV的顯示隱藏代碼

div隱藏與顯示

#menus {

background-color: #c4cff0;

}

function Layer_HideOrShow(cur_div)

{ var current=document.getElementById(cur_div);

if(current.style.visibility=="hidden")

{

current.style.visibility ="visible";

}

else

{

current.style.visibility ="hidden";

}

}

??

====================

無標題文檔

居中的DIV

=======================

3.javascript 控制 html元素 顯示/隱藏

1。編寫js函數

function display(id){

var traget=document.getElementById(id);

if(traget.style.display=="none"){

traget.style.display="";

}else{

traget.style.display="none";

}

}

2. 要顯示/隱藏的html元素加上 id 屬性

3,添加按鈕,鏈接等觸發 js 函數

顯示/隱藏

javascript顯示隱藏層

廣告

function 函數{

if(thisdiv.style.display=='none'){

thisdiv.style.display=""

}

else

thisdiv.style.display="none"

}

你先給div 取個ID=“AA”thisdiv=AA

javascript隱藏/顯示表單對象

javascript隱藏/顯示表單對象

[SCRIPT language=JavaScript]

function expandIt(el) {

whichEl =document.getElementById(el)

if (whichEl.style.display ==?? 'none') {

whichEl.style.display?? = '';

}

else {

whichEl.style.display?? = 'none';

}

}

[/SCRIPT]

el是對象的id,不管是tr或者table等等先設置一下id,然后進行調用。

例:

[a οnclick="expandIt('ttchild'); return false" href="#" ]try it[/a]

[tr id="ttchild"][td width="18"]Example[/td][/tr]

使用時把[]變成<>

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";

方法一隱藏后 頁面的位置還被控件占用 只是不顯示 類似于.net驗證控件的Display=Static

方法二隱藏后 頁面的位置不被占用 類似于.net驗證控件的Display=Dynamic

這個方法來我是從一個boblog模板上找到的,其實網絡上也可以搜索到;只是網絡上不看效果的轉載讓人難辯代碼的錯對和方便。用這個方法比用《給zblog再增3個功能:防刷、收縮側欄、復制加版權》的效果要好,純css隱藏div會刷新頁面,但用js就不會了。

js代碼如下,新建一個txt文件,復制進去,保存并修改文件后綴為js(例open.js)即可。我是把這個文件放在zblog的SCRIPT文件夾里,這里js比較多……

程序代碼function showhidediv(id){

try{

var sbtitle=document.getElementById(id);

if(sbtitle){

if(sbtitle.style.display=='block'){

sbtitle.style.display='none';

}else{

sbtitle.style.display='block';

}

}

}catch(e){}

}

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/541597.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/541597.shtml
英文地址,請注明出處:http://en.pswp.cn/news/541597.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

計算機工作對身體有害嗎,在電腦前長時間工作會對身體有害處嗎?

病情分析&#xff1a;目前,電腦對人體生理和心理方面的負面影響已日益受到人們的重視.為此科學使用電腦,減少電腦和網絡的危害是十分必要的.指導意見&#xff1a;一是要增強自我保健意識工作間隙注意適當休息,一般來說,電腦操作人員在連續工作1小時后應該休息10分鐘左右.并且最…

Java LinkedList getFirst()方法與示例

LinkedList getFirst()方法 (LinkedList getFirst() method) This method is available in package java.util.LinkedList. 軟件包java.util.LinkedList中提供了此方法。 This method is used to return the first or initial or beginning element of the linked list. 此方法…

C++第15周(春)項目2 - 用文件保存的學生名單

課程首頁在&#xff1a;http://blog.csdn.net/sxhelijian/article/details/11890759。內有完整教學方案及資源鏈接本程序中須要的相關文件。請到http://pan.baidu.com/s/1qW59HTi下載。【項目2-用文件保存的學生名單】  文件score.dat中保存的是若干名學生的姓名和C課、高數和…

計算機選配 注意事項,選擇鼠標注意事項有哪些

選擇鼠標注意事項有哪些每臺電腦旁邊都有了一個忠實的伴侶&#xff0c;那就是“Mouse”--鼠標。選擇鼠標最重要的一點就是質量&#xff0c;無論它的功能有多強大、外形多漂亮&#xff0c;如果質量不好那么一切都不用考慮了。那么&#xff0c;選擇鼠標注意事項有哪些?筆記本鼠標…

js 驗證護照_護照本地策略第2部分| Node.js

js 驗證護照In my last article (Passport local strategy section 1 | Node.js), we started the implementation of the passport-local authentication strategy. We also looked at the various requirements to get started with the login form. In this article, we wil…

svn版利用什么技術實現_金蔥粉涂料印花利用了什么技術?

金蔥粉涂料印花利用了什么技術:金蔥粉用涂料而不是用染料來生產印花布已經非常廣泛&#xff0c;以致開始把它當作一種獨立的印花方式。涂料印花是用涂料直接印花&#xff0c;該工藝通常叫做干法印花&#xff0c;以區別于濕法印花(或染料印花)。通過比較同一塊織物上印花部位和未…

網站換服務器需要注意什么問題,網站更換服務器要注意哪些事項

原標題&#xff1a;網站更換服務器要注意哪些事項網站在運營的過程中&#xff0c;出于某種考慮&#xff0c;我們會將網站進行服務器的變更&#xff0c;那么在進行服務器變成過程中&#xff0c;需要注意哪些事項。一、如果是跨服務商更換網站服務器&#xff0c;需要做備案遷移。…

json轉string示例_C.示例中的String.Insert()方法

json轉string示例C&#xff03;String.Insert()方法 (C# String.Insert() Method) String.Insert() method is used to insert a string in an existence string at specified index and returns a new string. String.Insert()方法用于在指定索引處的存在字符串中插入一個字符…

kafka分區與分組原理_大數據技術-Kafka入門

在大數據學習當中&#xff0c;主要的學習重點就是大數據技術框架&#xff0c;針對于大數據處理的不同環節&#xff0c;需要不同的技術框架來解決問題。以Kafka來說&#xff0c;主要就是針對于實時消息處理&#xff0c;在大數據平臺當中的應用也很廣泛。大數據學習一般都有哪些內…

mac 電腦找不到服務器 dns 地址,MAC OS下如何快速設置DNS服務器地址

樓主你好&#xff01;介紹以下Mac OS X DNS設置方法&#xff1a;1、點擊桌面頂部狀態欄里的蘋果圖標&#xff0c;在菜單里選擇“系統偏好設置”。2、點擊互聯網與無線下的“網絡”。3、在網絡界面&#xff0c;選中正在聯網的網絡連接&#xff0c;點擊右下角的“高級”選項。4、…

ActiveReports 報表控件官方中文新手教程 (1)-安裝、激活以及產品資源

&#xfeff;&#xfeff;本系列文章主要是面向初次接觸 ActiveReports 產品的用戶&#xff0c;能夠幫助您在三天之內輕松的掌握ActiveReports控件的基本用法&#xff0c;包含安裝、激活、創建報表、綁定數據源以及公布等內容。本篇文章我們就從安裝產品開始帶您開啟輕松的 Ac…

如何在React Native中使用React JS Hooks?

In my articles, Im going to be using either expo or snack online IDE and android emulator. 在我的文章中&#xff0c;我將使用expo或點心在線IDE和android模擬器。 React Hooks is simply an awesome tool that helps us use states and other react features without w…

華為P40pro 手機云臺_2020年目前拍照最好的手機推薦!華為P40 Pro!DXO全球榜首

目前最熱門的拍照手機自然是華為P40 Pro&#xff0c;其相機性能直接問鼎DXOMARK手機相機評分榜首。對于拍照要極求高的用戶&#xff0c;華為P40 Pro將是一個非常不錯的選擇。那么&#xff0c;華為P40 Pro除了出色的相機之外&#xff0c;其它方面表現如何呢&#xff1f;下面&…

容器性能比無容器服務器,【譯】容器 vs 無服務器(Serverless)

一些歷史不久之前&#xff0c;開發&#xff0c;部署和運維還相當復雜。在一開始&#xff0c;運維不僅需要修補程序代碼&#xff0c;還要支持物理機器。保持服務器&#xff0c;硬件與軟件處于最新狀態也是一項艱巨的任務。在2000年代&#xff0c;一個新的模型——架構即服務(Iaa…

Centos 7安裝與配置nagios監控(一)

目 錄序言(必備知識)一、安裝規劃1.1系統環境1.2所需軟件包二、配置安裝環境2.1同步時間2.2禁用SElinux2.3 xftp上傳軟件包2.4安裝郵件服務三、監控主機安裝3.1安裝nagios的運行環境3.2增加用戶3.3安裝nagios3.4配置權限3.5安裝插件3.6安裝nrpe四、遠程主機安裝4.1配置運行環境…

java字符串刪掉子串_如何從Java中的列表中刪除子列表?

java字符串刪掉子串從列表中刪除子列表 (Removing SubList from a List) Suppose, we have a list of few elements like this, 假設我們列出了一些這樣的元素&#xff0c; list [10,20,30,40,50]From the list, we have to delete a sub list between sourcing_index (inclu…

備份linux系統報錯_Linux 系統如何快速入門?分享民工哥總結的經驗

大家好&#xff0c;我是民工哥。認識或熟悉我的人都知道&#xff0c;是做運維出身的&#xff0c;所以&#xff0c;很多時候&#xff0c;有很多朋友喜歡問我一些有關運維的問題&#xff0c;比如&#xff1a;我應該如何入門Linux系統運維&#xff1f;Linux系統運維到底需要學哪些…

pe聯想服務器裝系統教程視頻,演示聯想電腦u盤重裝系統xp教程

聯想電腦U盤重裝XP系統的方法很多朋友詢問&#xff0c;其實現在很多電腦已經不支持XP系統的安裝了&#xff0c;如果你的聯想電腦是近幾年購買的&#xff0c;還是安裝win10系統比較保險。當然聯想電腦安裝系統過程中遇到問題也可以聯系人工客服。聯想電腦如何使用U盤重裝系統XP呢…

TCP Socket 粘包

&#xfeff;&#xfeff;這兩天看csdn有一些關于socket粘包&#xff0c;socket緩沖區設置的問題。發現自己不是非常清楚&#xff0c;所以查資料了解記錄一下&#xff1a; 一兩個簡單概念長連接與短連接&#xff1a;1.長連接 Client方與Server方先建立通訊連接。連接建立后不斷…

離散數學和組合數學什么關系_關系類型| 離散數學

離散數學和組合數學什么關系關系類型 (Types of Relation) There are many types of relation which is exist between the sets, 集合之間存在許多類型的關系&#xff0c; 1. Universal Relation 1.普遍關系 A relation r from set a to B is said to be universal if: R A…