如何创建到DIV的链接

How to Create a Link to a DIV

本文关键字:DIV 链接 创建 何创建      更新时间:2023-09-26

这是我正在做的…一个由超链接调用的可最大化和可最小化的弹出窗口。

<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 = "&#9660;";
      top_div.classList.toggle("minimized", false);
      top_div.classList.toggle("maximized", true);
      max = true;
    } else if (top_div.classList.contains("maximized")) {
      elem.innerHTML = "&#9650;";
      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);">&#9660;</span>
      <span class="close_pop" onclick="close_pop(this);">&times</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);">&#9660;</span>
      <span class="close_pop">&times</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"在鼠标上点击切换显示