javascript - 如何使用css弹出多标签

标签 javascript css tabs popup

我一直在努力解决以下代码

<!DOCTYPE html>
<html lang ="en">
<head>
<style type="text/css">
a{
  text-decoration:none;
  color:#333;
 }
#pop{
	width:557px;
	height:400px;
	background:#333;
	left: 30%;
	margin-top:80px;
	z-index:999999;
	box-shadow: 0px 0px 10px #000;
	-webkit-box-shadow: 0px 0px 10px #000;
	-moz-box-shadow: 0px 0px 10px #000;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
}
#pop2{
	width:557px;
	height:400px;
	background:#333;
	left: 30%;
	margin-top:80px;
	z-index:999999;
	box-shadow: 0px 0px 10px #000;
	-webkit-box-shadow: 0px 0px 10px #000;
	-moz-box-shadow: 0px 0px 10px #000;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
}

.content {
	width:100%;
	background: #fff;
	color:#666;
	width:500px;
	height: 300px;
	overflow-y:scroll;
	margin:auto;
	padding:10px;
	text-align:justify;
	box-shadow: 0px 0px 10px #333 inset;
	-webkit-box-shadow: 0px 0px 10px #333 inset;
	-moz-box-shadow: 0px 0px 10px #333 inset;
}

#pop:target{
	height:30px;
	width:250px;
	overflow:hidden;
	position:fixed;
	bottom:0;
	left:236px;
}
#pop2:target{
	height:30px;
	width:250px;
	overflow:hidden;
	position:fixed;
	bottom:0;
	left:236px;
}
</style>
</head>

<a href="#" onclick="document.getElementById('pop').style.display='block';">
    CLICK HERE
</a>  
 
<div id="pop" style="display:none;">
<div class="buttons-bar">
&nbsp;&nbsp;&nbsp;Header
<a href="" onclick="document.getElementById('pop').style.display='none'">X</a>
<a href="#">></a>
<a href="#pop" >-</a>
</div>
<div class="content">
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> 
<a href="#" onclick="document.getElementById('pop2').style.display='block';">
    CLICK HERE
</a>  
 
<div id="pop" style="display:none;">
<div class="buttons-bar">
&nbsp;&nbsp;&nbsp;Header
<a href="" onclick="document.getElementById('pop2').style.display='none'">X</a>
<a href="#">></a>
<a href="#pop2" >-</a>
</div>
<div class="content">
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> 
</html>

但这里的问题是，我使用“:target”伪类，所以只能打开一个选项卡，当弹出窗口最小化时，另一个弹出窗口打开并最小化，第一个弹出打开，但我喜欢有多个标签。关于我如何绕过它的任何想法？欢迎任何想法，甚至是 javascript。谢谢

最佳答案

给你，这是我做的东西。

我让它易于扩展，您所要做的就是复制另一个选项卡的 HTML。如果这不是您要查找的内容，我可以对其进行修改。

编辑:固定代码，使最小化的弹出窗口将最小化其他弹出窗口然后最大化

http://jsfiddle.net/weissman258/cd866j6h/4/ 

function expand_collapse(elem) {
    var top_div = elem.parentNode.parentNode.parentNode;
    if (top_div.classList.contains("maximized")) {
        elem.innerHTML = "&#9650;";
        top_div.classList.toggle("minimized", true);
        top_div.classList.toggle("maximized", false);
    } else {
        var popouts = document.getElementsByClassName("pop_out");
        for(var i=0;i<popouts.length;i++) {
            popouts[i].classList.toggle("minimized", true);
            popouts[i].classList.toggle("maximized", false);
            popouts[i].getElementsByClassName("expand_collapse")[0].innerHTML = "&#9650;";
        }
    elem.innerHTML = "&#9660;";
    top_div.classList.toggle("maximized", true);
    top_div.classList.toggle("minimized", false);
    }
}

function close_pop(elem) {
    elem.parentNode.parentNode.parentNode.style.display = 'none';
}
.pop_out {
  background: #333;
  border-radius: 5px 5px 0 0;
  box-shadow: 0px 0px 10px #000;
}
.pop_content {
  background: white;
  font-size: 15px;
  padding: 2px;
}
.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;
}
.close_pop:hover {
  color: red;
}
.expand_collapse {
  margin-right: 10px;
  cursor: pointer;
}
.expand_collapse:hover {
  color: #ccc;
}
<div style="position:fixed;bottom:-4px;">
  <div class="pop_out minimized">
    <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);">&#9650;</span>
      <span class="close_pop" onclick="close_pop(this);">X</span></span>
    </div>
    <div class="pop_content">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 class="pop_out minimized">
    <div style="padding:2px;position:relative;"> <span style="margin-left:10px;">Tab 2</span>
      <span style="position:absolute;right:15px;">
     <span class="expand_collapse" onclick="expand_collapse(this);">&#9650;</span>
      <span class="close_pop" onclick="close_pop(this);">X</span></span>
    </div>
    <div class="pop_content">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>

关于javascript - 如何使用css弹出多标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31581970/

上一篇：javascript - 页面加载时，jQuery触发点击事件

下一篇：javascript - 即时搜索延迟1个字符

相关文章：

javascript - 你如何在 Javascript 中使用 onPageLoad？

javascript - 将 json 转换为 xml 并删除空字符串

javascript - 使用 electron 和 Systemjs 导入 Node 模块

javascript - 从对象(带属性)转换的数组返回 0 长度

css - AngularJS:条件语句在 Controller 的 Angular JS 方法中不起作用

jquery - Coinslida jQuery - CSS 问题

css - 更改 createMaterialTopTabNavigator 默认样式

javascript - 使用 Rails 和 jQuery 在局部动态渲染 View

jquery - 如何删除响应菜单下方的背景滚动

php - 我可以知道人们何时在新标签页中打开我网站上的链接吗？

©2024 IT工具网  联系我们