html dom列表項開合

阿新 • • 發佈：2018-12-26

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style  type="text/css">
        dl dd{
            margin: 0px;
        }
        dl{
            height: 18px;
        }
        .open {
            display: inline-block;
        }
        .close {
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script type="text/javascript" src="js/write.js"></script>
    <script type="text/javascript">
//        var flag=true;
        function show(node) {
          /*  var list=document.getElementsByTagName("dl");
            var oDl=list[0];
            if(flag)
            {
                oDl.style.overflow="visible";
                flag=false;
            }
            else
            {
                oDl.style.overflow="hidden";
                flag=true;
            }*/
            if(node.parentNode.className=="close")
            {
                node.parentNode.className="open";
            }
            else
            {
                node.parentNode.className="close";
            }
        }

        function showOne(node)
        {
            var oParentNode=node.parentNode;
            var collNode=document.getElementsByTagName("dl");
            for(var x in collNode)
            {
                //x是陣列下標

                if(collNode[x]==oParentNode)
                {
                    if(collNode[x].className=="close")
                    {
                        collNode[x].className="open";
                    }
                    else
                    {
                        collNode[x].className="open";
                    }

                }
                else
                {
                    collNode[x].className="close";
                }
            }

        }

    </script>

    <dl class="close">
        <dt onclick="showOne(this)">點選顯示隱藏內容1</dt>
        <dd>隱藏內容</dd>
        <dd>隱藏內容</dd>
        <dd>隱藏內容</dd>
        <dd>隱藏內容</dd>
        <dd>隱藏內容</dd>
    </dl>

    <dl class="close">
        <dt onclick="showOne(this)">點選顯示隱藏內容2</dt>
        <dd>隱藏內容</dd>
        <dd>隱藏內容</dd>
        <dd>隱藏內容</dd>
        <dd>隱藏內容</dd>
        <dd>隱藏內容</dd>
    </dl>

    <dl class="close">
        <dt onclick="showOne(this)">點選顯示隱藏內容3</dt>
        <dd>隱藏內容</dd>
        <dd>隱藏內容</dd>
        <dd>隱藏內容</dd>
        <dd>隱藏內容</dd>
        <dd>隱藏內容</dd>
    </dl>

</body>
</html>

html dom列表項開合

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <s

HTML DOM item() 方法

child best ner == asc ctype sre 回文代碼一直不知道javascript還有類似jQ裏面eq()的函數，原來原生javascript的item()有類似功能：由於是原生javascript,先補習下children和childNodes

HTML DOM addEventListener() 方法

innerhtml err 版本號 list 更多 use run afa 手冊定義和用法 addEventListener() 方法用於向指定元素添加事件句柄。提示：使用 removeEventListener() 方法來移除 addEventListener()

bootstrap-列表組--組合列表項的狀

bootstrap-列表組--組合列表項的狀1.運行效果如圖所示2.實現代碼如下<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Comp

核心DOM和html DOM的區別

技術分享 row 標簽 node splay out mov ... tex DOM分為三部分：（1）核心DOM：遍歷DOM樹、添加新節點、刪除節點、修改節點（2）HTML DOM：以一種簡便的方法訪問DOM樹（3）XML DOM：準用於操作XML文檔核心D

HTMLayout列表控件動態添加列表項，預覽本機字體。

iyu elong peb nba i94 hexo psd upa jieba %5Bpython%5D%E8%8E%B7%E5%8F%96%E7%BD%91%E9%A1%B5%E4%B8%AD%E5%86%85%E5%AE%B9%E4%B8%BA%E6%B1%89%E5

HTML DOM 屬性

使用 tab 簡單方法 htm 文本節點 undefined text 大寫 null innerHTML 屬性獲取元素內容的最簡單方法是使用 innerHTML 屬性。 innerHTML 屬性對於獲取或替換 HTML 元素的內容很有用。實例下面的代碼獲取 id="

JavaScript HTML DOM

文檔 pre tel mod 實例最簡 nts model images 通過 HTML DOM，可訪問 JavaScript HTML 文檔的所有元素。 HTML DOM （文檔對象模型）當網頁被加載時，瀏覽器會創建頁面的文檔對象模型（Document Object

html中列表

定義 ges images 實體 image class -c 使用屬性其中，dl為自定義列表，dt為列表項，dd對列表項描述無序列表  <ul type="disc">

JavaScript HTML DOM 元素（節點）

enc javascrip item pan 效果 demo 移動元素成功 append 在文檔對象模型 (DOM) 中，每個節點都是一個對象。DOM 節點有三個重要的屬性： 1. nodeName : 節點的名稱 2. nodeValue ：節點的值 3. no

JavaScript HTML DOM - 改變CSS

head char document ctype .cn body pre 語法 logs 改變 HTML 樣式 //語法document.getElementById(id).style.property=new style <p id="p2">He

JavaScript HTML DOM 事件

pan 代碼 inner date load ntb 用戶按鈕 scrip 對事件做出反應我們可以在事件發生時執行 JavaScript，比如當用戶在 HTML 元素上點擊時。如需在用戶點擊某個元素時執行代碼，請向一個 HTML 事件屬性添加 JavaScript 代

HTML DOM 實例

htm domain 主機 idt type hspa 內容 doctype 輸入文本 Document 對象返回文檔中錨的數目 document.write(document.anchors.length);//document會覆蓋原網頁返回文檔中第一個錨的 i

javascript--- HTML DOM

web post 動態頁面編程結構化認知部分方法 -- 看了這個題目，不知聰明的讀者會有什麽樣的感覺？這篇文章將要講javascript和DOM的關系呢？還是要講javascript的DOM?在這裏我首先就講明文章的主旨有兩點：什麽

HTML DOM 第五篇

不同版本按鍵 javascrip 點擊 div 開元按鈕驗證瀏覽器類型通過 HTML DOM，JavaScript 能夠訪問 HTML 文檔中的每個元素。 HTML DOM 允許您在事件發生時執行代碼。當 HTML 元素"有事情發生"時，瀏覽器就會生成事件：

HTML DOM節點的增刪改查

自己 div text dom節點定義 pos 就會 fcm .get 上篇博客中，我們已經初步接觸了DOM基礎，可是我們學習是為了可以更好地應用，今天我們就來看看DOM節點的增刪改查。無論在哪裏，我們想要操作一個東西，總是應該先去獲得它。那麽

Android零基礎入門第39節：ListActivity和自定義列表項

arraylist component save 高速 ram 如果 view設置 ren 屬性相信通過前兩期的學習，以及會開發最簡單的一些列表界面了吧，那麽本期接著來學習更多方法技巧。一、使用ListActivity 如果程序的窗口僅僅需要

html dom與javascript的關系 -我們用JavaScript對網頁（HTML）進行的所有操作都是通過DOM進行的

兩種得來來講都對標記組織程序員 tro sdn 一，什麽是DOM (參考源http://www.cnblogs.com/chaogex/p/3959723.html) DOM是什麽 DOM全稱為The Document Object Model，應該理解為是一個

JavaScript HTML DOM增刪改查

刪除 scrip color 沒有 id屬性 tag reat 添加 val 首先 js 可以修改HTML中的所有元素和屬性，它還可以改變CSS樣式，並且可以監聽到所有事件並作出響應，這篇筆記呢主要記錄如何對HTML元素進行增刪改查。 1 查找DOM 第一種方式是我

JavaScript HTML DOM事件

splay nbsp onload style blog div 提交 cookies cti HTML DOM 使javaScript有能力對HTML事件作出反應。 HTML事件的例子：當用戶點擊鼠標時當網頁已加載時當圖像已加載時當鼠標移動到元素上時當輸入字段

html dom列表項開合

相關推薦