如何创建到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>
但是弹出窗口打开了页面,我希望弹出窗口只在点击超链接评论时打开,而不是在加载页面时打开。任何帮助都将不胜感激。我尝试了不同的方法在超链接,但无济于事。
请查看下面的链接
$(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>
在初始页面加载时弹出元素没有被隐藏。
为CSS中的弹出元素添加样式。
display:none
为弹出元素指定一个ID属性,以便于Javascript定位id="pop1"
添加属性到超链接
onclick="open_pop('#pop1')"
添加javascript函数
function open_pop(elem)
{
elem.style.display = 'block';
}
或者为了更有效地与代码同步,为弹出窗口提供一个自定义类来修改显示样式。
我还会考虑使用ID来进行Javascript选择,而不是在父元素中爬行,如果从树中添加或删除子元素,可能会破坏代码。
在简单代码中
html<div id="welcomeDiv" style="display:none;" class="answerswer_list" > WELCOME</div>
<input type="button" name="answerswer" value="Show Div" onclick="showDiv()" />
javascript function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
我无法分享我的jsfiddle链接。我想这对你有帮助。
或
只需使div style = "display:none"
在鼠标上点击切换显示
相关文章:
- 鼠标光标改变Javascript链接的DIV
- 获取包含单击链接的DIV的文本
- Div 幻灯片 单击链接
- 将DIV ID内的所有链接设置为返回false
- 当满足javascript/jquery条件时显示DIV(包括jsFiddle链接)
- 将 Div 类附加到超链接类 — 然后单击时克隆并附加超链接到容器
- JQuery HideAllShowOne + 链接以打开 DIV
- 单击链接时,如何切换 DIV 的大小以扩展其高度
- 使用 Javascript 从 Div 中检索 href 属性(链接)
- 使用 jQuery 显示带有超链接的 Div
- 如何链接完整的 DIV 容器
- 单击带有外部网站的 DIV 内的链接
- AJAX - 将可链接的内容保留在 DIV 中
- Jquery 平滑滚动到 DIV - 使用链接中的 ID 值
- 使用 jquery 根据链接单击切换 DIV 可见性
- 滚动按钮链接Div Id's
- 创建的DIV内部的链接导致悬停时删除了DIV
- 带子链接的可点击DIV
- 链接无法在Ipad上的Div上工作-任何其他设备/浏览器都可以100%工作
- 将DIV实现为链接