如何創建到DIV的鏈接
[英]How to Create a Link to a DIV
問題描述
我正在處理的是...通過超鏈接調用的最大化和最小化彈出窗口。
<html> <style type="text/css"> .pop_out { background: #333; border-radius: 5px 5px 0 0; box-shadow: 0px 0px 10px #000; } .minimized { display: inline-block; margin-right: 10px; bottom: 0; width: 250px; height: 60px; overflow: hidden; } .maximized { top: 0; position: fixed; display: block; width: auto; height: auto; /* Whatever styling you want when maximized, as long as you add the same styling to minimized class to change it back */ } .close_pop { cursor: pointer; color: #fff; } .close_pop:hover { color: red; } .expand_collapse { margin-right: 10px; cursor: pointer; color: #fff; height: 3px; } .expand_collapse:hover { color: #ccc; } a { position: fixed; top: 150; } </style> <script type="text/javascript"> var max = true; function expand_collapse(elem) { var top_div = elem.parentNode.parentNode.parentNode; if (max === false) { elem.innerHTML = "▼"; top_div.classList.toggle("minimized", false); top_div.classList.toggle("maximized", true); max = true; } else if (top_div.classList.contains("maximized")) { elem.innerHTML = "▲"; top_div.classList.toggle("minimized", true); top_div.classList.toggle("maximized", false); max = false } } function close_pop(elem) { var top_div = elem.parentNode.parentNode.parentNode; top_div.style.display = 'none'; if (top_div.classList.contains("maximized")) { max = false; } } </script> <a href="#">CLICK HERE</a><!--Right Here --> <div style="position:fixed;bottom:0px;"> <div class="pop_out maximized"> <div style="padding:2px;position:relative;"> <span style="margin-left:10px;">Tab 1</span> <span style="position:absolute;right:15px;"> <span class="expand_collapse" onclick="expand_collapse(this);">▼</span> <span class="close_pop" onclick="close_pop(this);">×</span></span> </div> <div style="background:white;font-size:15px;padding:2px;">The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> </div> </div>
但是彈出窗口隨頁面一起打開，我希望僅在單擊注釋的超鏈接時才打開彈出窗口，而在加載頁面時不希望彈出窗口。 任何幫助都感激不盡。 我對超鏈接嘗試了不同的方法，但無濟於事。
3 個解決方案
解決方案1
0 2015-07-24 10:38:07
初始頁面加載時不會隱藏彈出窗口元素。
在CSS的彈出元素中添加樣式。
display:none
給彈出窗口元素一個ID屬性，以便更輕松地將JavaScript定位為id="pop1"
將屬性添加到超鏈接
onclick="open_pop('#pop1')"
添加JavaScript功能
function open_pop(elem)
{
elem.style.display = 'block';
}
或者，為了更有效地與代碼同步，請為彈出窗口提供一個自定義類，以修改顯示樣式。
我還將考慮使用ID進行Javascript選擇，而不是通過父級進行爬網，如果子級元素或從樹中添加或刪除了父級，則可能會破壞代碼。
解決方案2
0 2015-07-24 10:43:17
請檢查下面的鏈接
$(document).ready(function() { $('.show-popup').on('click', function() { $('.popup').fadeIn(); }); $('.close_pop').on('click', function() { $('.popup').fadeOut(); }); });
.popup { display: none; } .pop_out { background: #333; border-radius: 5px 5px 0 0; box-shadow: 0px 0px 10px #000; } .minimized { display: inline-block; margin-right: 10px; bottom: 0; width: 250px; height: 60px; overflow: hidden; } .maximized { top: 0; position: fixed; display: block; width: auto; height: auto; /* Whatever styling you want when maximized, as long as you add the same styling to minimized class to change it back */ } .close_pop { cursor: pointer; color: #fff; } .close_pop:hover { color: red; } .expand_collapse { margin-right: 10px; cursor: pointer; color: #fff; height: 3px; } .expand_collapse:hover { color: #ccc; } a { position: fixed; top: 150; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <a class="show-popup" href="#">CLICK HERE</a> <!--Right Here --> <div class="popup" style="position:fixed;bottom:0px;"> <div class="pop_out maximized"> <div style="padding:2px;position:relative;"> <span style="margin-left:10px;">Tab 1</span> <span style="position:absolute;right:15px;"> <span class="expand_collapse" onclick="expand_collapse(this);">▼</span> <span class="close_pop">×</span></span> </div> <div style="background:white;font-size:15px;padding:2px;">The standard Lorem Ipsum passage, used since the 1500s "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </div>
解決方案3
-1 2015-07-24 10:32:55
用簡單的代碼
html
<div id="welcomeDiv" style="display:none;" class="answer_list" > WELCOME</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />
javascript
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
我無法分享我的jsfiddle鏈接。 所以這可以幫助您。
要么
只需在鼠標單擊上使div style = "display:none"即可切換顯示。
如何在Javascript中為另一個IMG創建div，link和img
[英]How to create a div , link and img to another IMG in Javascript
是否可以使用鏈接的jquery onclick創建div元素
[英]Is it possible to create a div element with jquery onclick of a link
JavaScript，使用鏈接創建div，然后通過單擊該div刪除
[英]JavaScript, create div with link and then remove by clicking said div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.