需要顯示一個div當我點擊使用Javascript

鏈接對於一些愚蠢的做法，在我不能使用警報或任何的js對話框，我必須做出以下魔術發生：需要顯示一個div當我點擊使用Javascript

詞根記憶一與鏈接的div，在這種情況下，它是一個叫做信息。 2.製作一個無形的div，這將是我的「PopUp」，裏面有一些垃圾信息。 3.當我點擊鏈接信息時，不可見div應該實現。

雖然簡單，甚至相當明顯，但我在獲取如何使這種事情發生的邏輯方面遇到了一些麻煩。如果它幫助我挽回面子，我就開始編程......就像1個月前，只是HTML CSS，我是這個整個Js宇宙的新手。

這是我的代碼，截至目前：

<div class="scroll-area" id="lista"> 
    <div class="box"> 
     <p>Item #1</p> 
     <p class="info"><a href="#" id="lnkInfo">Info</p> 
     </a> 
     <p class="info"><a href="#">Take</p> 
     </a> 
    </div> 
    <div class="box"> 
     <p>Item #2</p> 
     <p class="info"><a href="#">Info</p> 
     </a> 
     <p class="info"><a href="#">Take</p> 
     </a> 
    </div> 
</div>

這裏談到的呻吟「彈出」 ......

<div class="popUp"> 
    <ul> 
     <li>BLA BLA</li> 
     <li>BLA BLA/li> 
     <li>BLA BLA</li> 
     <li>BLA!</li> 
    </ul> 
</div>

CSS以防萬一。

.popUp { 
    position: absolute; 
    width: 300px; 
    height: 300px; 
    margin: 0 auto; 
    background-color: #ecf0f1; 
    top: 100px; 
    left: 100px; 
    display: none; 
} 

.show { 
    display: block; 
}

而我雖然是一個開始的JS：

var elementPopUp = document.getElementById('lnkInfo'); 

elementoPopUp.addEventListener('click', validate); 

function validate() { 
    document.getElementById('popUp').className += ' show'; 
}

來源

2014-03-12 Code Grasshopper

'「對於這我不能使用警報或任何的js對話框，我必須做出以下魔術發生一些愚蠢的做法」'你是說，不能夠使用警報是**糟糕**？因爲如果你是，我們可能有話......爲了調試的目的，你應該嘗試使用'console.log（）'，因爲它不像alert（）那樣突兀。至於如何創建一個元素，你應該從這裏開始：https：//developer.mozilla.org/en-US/docs/Web/API/document.createElement – zero298

這僅僅是一個例子，不要打我D;而且我不需要它來進行調試或者其他任何類型的事情，我在談論最好的Javascript 101。我只需要它在帖子中說的內容，當我點擊信息鏈接時div會顯示。 –

你允許使用jQuery嗎？ :) –

修訂你必須在你的HTML代碼修復語法錯誤，並且您使用getElementById獲得元素，但你設置popUp因爲類將其更改爲ID

<div class="scroll-area" id="lista"> 
    <div class="box"> 
     <p>Item #1</p> 
     <p class="info"><a href="#" id="lnkInfo">Info 
     </a></p> 
     <p class="info"><a href="#">Take 
     </a></p> 
    </div> 
    <div class="box"> 
     <p>Item #2</p> 
     <p class="info"><a href="#">Info</a></p> 

     <p class="info"><a href="#">Take</a></p> 
    </div> 
</div> 
<div id="popup" > 
    <ul> 
     <li>BLA BLA</li> 
     <li>BLA BLA</li> 
     <li>BLA BLA</li> 
     <li>BLA!</li> 
    </ul> 
</div>

和CSS

#popup { 
    position: absolute; 
    width: 300px; 
    height: 300px; 
    margin: 0 auto; 
    background-color: #ecf0f1; 
    top: 100px; 
    left: 100px; 
    display: none; 
} 

#popup.show { 
    display: block; 
}

和JavaScript

var elementPopUp = document.getElementById('lnkInfo'); 

elementPopUp.addEventListener('click', validate); 

function validate() { 
    var d = document.getElementById("popup"); 

    d.classList.add("show"); 
}

來源

2014-03-12 21:27:11 Farnabaz

我的錯誤，但它仍然不能解決我認爲的Js部分。我會去嘗試 –

你的代碼中沒有任何帶'popUp' id的元素，將'class =「popUp」'改爲'id =「popUp」' – Farnabaz

已更正！謝謝，它不起作用，但至少這是一個錯誤。 –

我相信，如果你這樣做：

<div class="scroll-area" id="lista"> 
     <div class="box"> 
      <p>Item #1</p> 
      <p class="info"><a href="#" id="lnkInfo" onclick="validate()">Info</p></a> 
      <p class="info"><a href="#">Take</p></a> 
     </div> 
     <div class="box"> 
      <p>Item #2</p> 
      <p class="info"><a href="#">Info</p></a> 
      <p class="info"><a href="#">Take</p></a> 
     </div> 
       </div>

，使JavaScript本：

function validate(){ 

document.getElementById('popUp').style.visibility = 'visible'; 
}

這應該工作。我沒有測試過，所以我可能有一個語法或兩個錯誤。

來源

2014-03-12 21:31:40

這裏是如何影響通過JavaScript元素風格的例子：

HTML

<a id="shower" href=""> 
    show 
</a> 

<br> 
<a id="hider" href=""> 
    hide 
</a> 

<br> 
<div id="popup" class="hide">Hello</div>

document.getElementById("shower").addEventListener("click", function (e) { 
    var myDiv = document.getElementById("popup"); 
    myDiv.className = ""; 
    e.preventDefault(); 
}); 

document.getElementById("hider").addEventListener("click", function (e) { 
    var myDiv = document.getElementById("popup"); 
    myDiv.className = "hide"; 
    e.preventDefault(); 
});

CSS

.hide { 
    display: none; 
}

來源

2014-03-12 21:34:56 zero298

非常感謝您的幫助，我將以這種方式隱藏popup @ –

這裏是什麼，我會做一個簡化的版本：

的HTML：

<a href="#" id="clickMe">clickMe</a> 

<div id="showMe">showMe</div>

的CSS：

display:none;

中的JavaScript：

document.getElementById("clickMe").onclick = function() { 
    document.getElementById("showMe").style.display = "block"; 
}

這是一個fiddle to show the effect

希望這有助於;）

來源

2014-03-12 21:45:33 webeno

需要顯示一個div當我點擊使用Javascript

回答

相關問題