js控制div樣式顯示與隱藏，JS經過點擊超連接右邊（指定位置）顯示一個圖標

時間 2019-12-04

標籤控制 div 樣式顯示隱藏經過點擊連接右邊指定位置一個圖標欄目 JavaScript 简体版

原文原文鏈接

原文出自：https://blog.csdn.net/seesun2012
javascript

javascript基礎篇，老土的方法解決js控制div樣式，便於新手理解，粗暴的不能再粗暴，若是你是高手，請忽略！css

思路：
        1.先將div設置爲隱藏，style="display:none"；
        2.調用javascript腳本showContent()方法；
        3.獲取傳入的id，document.getElementById()；
        4.改變div的樣式，block：顯示，none：隱藏html

index.html 頁面java

<a href="caidan.html">《點擊超連接顯示圖標》案例</a>

caidan.html 頁面url

<!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">
<head>
   <title>經過點擊超連接右邊顯示一個鉛筆圖標</title>
   <script type="text/javascript">
        function showContent(getids){
            //必須有id傳入
            if (document.getElementById){
                //獲取對用id的div容器
                target=document.getElementById(getids);
                var id = getids;
                //複製粘貼，簡單粗暴
                var qbOne = "qbOne";
                var qbTwo = "qbTwo";
                var qbThree = "qbThree";
                //判斷當前點擊的id是否與操做的id保持一致（簡單粗暴）
                if(id == qbOne){
                    //改變當前顯示爲隱藏
                     if (target.style.display=="block"){
                        target.style.display="none";
                     } else {
                         //改變當前隱藏爲顯示
                        target.style.display="block";
                        //第二個(qbTwo)、第三個(qbThree )以及其餘圖標分別隱藏
                        qbTwo = document.getElementById("qbTwo");
                        qbTwo.style.display="none";
                        qbThree = document.getElementById("qbThree");
                        qbThree.style.display="none";
                     }
                }
                else if(id == qbTwo){
                     if (target.style.display=="block"){
                        target.style.display="none";
                     } else {
                        target.style.display="block";
                        //同上，複製粘貼，簡單粗暴
                        qbOne = document.getElementById("qbOne");
                        qbOne.style.display="none";
                        qbThree = document.getElementById("qbThree");
                        qbThree.style.display="none";
                     }
                }
                else if(id == qbThree){
                     if (target.style.display=="block"){
                        target.style.display="none";
                     } else {
                        target.style.display="block";
                        //同上，複製粘貼，不求甚解
                        qbOne = document.getElementById("qbOne");
                        qbOne.style.display="none";
                        qbTwo = document.getElementById("qbTwo");
                        qbTwo.style.display="none";
                     }
                }
                else{
                    //若是沒有id就返回一個空
                    return null;
                }
            }
        }
    </script>

    <style type="text/css">
        /* ===建議使用一行樣式，這裏可修改圖片和圖標，不做解釋=== */
        #caidan {width:377px;border:0px solid red;height:231px;background:url(img/caidanbanzi.png);background-repeat:repeat-y;margin-top:50px;margin-left:50px;text-decoration:none;}

        /* 第一個菜單 */
        #ttOne {align:center;width:203px;;border:0px solid red;text-align:center;margin-top:30px;margin-left:50px;float:left;text-decoration:none;}
        #qbOne {background-image:url(img/qianbi.png); width:74px;height:73px;float:left;border:0px solid red;margin-top:-30px; display:none; }

        /* 第二個菜單 */
        #ttTwo {align:center;width:203px;cursor:url(img/qianbi.png);border:0px solid red;text-align:center;margin-top:50px;margin-left:50px;float:left;text-decoration:none;}
        #qbTwo {background-image:url(img/qianbi.png);width:74px;height:73px;float:left;border:0px solid red;margin-top:-10px; display:none; }

        /* 第三個菜單 */
        #ttThree {align:center;width:203px;cursor:url(img/qianbi.png);border:0px solid red;text-align:center;margin-top:40px;margin-left:50px;float:left;text-decoration:none;}
        #qbThree {background-image:url(img/qianbi.png);width:74px;height:73px;float:left;border:0px solid red;margin-top:-10px; display:none; }

        /* ... */

    </style>

</head>

<body>
    <!-- 簡單粗暴,不求甚解 -->
    <div id="caidan">
        <a id="ttOne" href="javascript:showContent('qbOne')">甲狀腺腔鏡手術</a>
        <div id="qbOne"></div>

        <a id="ttTwo" href="javascript:showContent('qbTwo')">甲狀腺手術中喉返神經探測儀的應用</a>
        <div id="qbTwo"></div>

        <a id="ttThree" href="javascript:showContent('qbThree')">甲狀腺疾病患者應該多補充碘嗎？</a>
        <div id="qbThree"></div>
        
    </div>



    <br />  
    <img src="img/qianbi.ico" width="19" height="14" style="cursor:pointer;" onclick="top.history.back()" />
    <input type="button" onclick="history.go(-1)" value="返回上一頁">
    <a href="javascript:history.go(-1)" >返回</a>

</body>
</html>

附上百度雲盤源碼：http://pan.baidu.com/s/1eS3bKjS 提取碼：0bl0

若是此文章對你有幫助，請不要吝嗇你的點贊！.net