如何创建到DIV的链接
[英]How to Create a Link to a DIV
问题描述
Here is what im working on... A maximizable and minimizable pop-up that is called by an hyperlink. 
我正在处理的是...通过超链接调用的最大化和最小化弹出窗口。
<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>
But the pop up opens with the page and i want the pop up to only be opened when the hyperlink commented is clicked and not when the page is loaded. 但是弹出窗口随页面一起打开，我希望仅在单击注释的超链接时才打开弹出窗口，而在加载页面时不希望弹出窗口。 Any help will be much appreciated. 任何帮助都感激不尽。 I have tried different methods on the hyperlink but to no avail. 我对超链接尝试了不同的方法，但无济于事。
3 个解决方案
解决方案1
0 2015-07-24 10:38:07
The pop-up element isn't being hidden on initial page load. 初始页面加载时不会隐藏弹出窗口元素。
Add style to the pop-up element in CSS. 在CSS的弹出元素中添加样式。
display:none
Give the pop-up element an ID attribute for easier Javascript targeting id="pop1" 给弹出窗口元素一个ID属性，以便更轻松地将JavaScript定位为id="pop1"
Add attribute to the hyperlink 将属性添加到超链接
onclick="open_pop('#pop1')"
Add javascript function 添加JavaScript功能
function open_pop(elem)
{
elem.style.display = 'block';
}
Or to synchronise more effectively with your code, give the pop-up one of your custom classes to modify the display style. 或者，为了更有效地与代码同步，请为弹出窗口提供一个自定义类，以修改显示样式。
I would also consider using ID's for Javascript selection as opposed to crawling through parents which could break the code if children elements or added or removed from the tree. 我还将考虑使用ID进行Javascript选择，而不是通过父级进行爬网，如果子级元素或从树中添加或删除了父级，则可能会破坏代码。
解决方案2
0 2015-07-24 10:43:17
Please check the link below 请检查下面的链接
$(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
in simple code, 用简单的代码
html html
<div id="welcomeDiv" style="display:none;" class="answer_list" > WELCOME</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv()" />
javascript javascript
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
I could not share my jsfiddle link. 我无法分享我的jsfiddle链接。 so this helps you i guess. 所以这可以帮助您。
OR 要么
Just make the div style = "display:none" on mouse click toggle the display. 只需在鼠标单击上使div style = "display:none"即可切换显示。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.