如何使用css弹出多标签

【问题标题】：How to make a multi-tab pop up with css如何使用css弹出多标签
【发布时间】：2015-07-23 08:26:04
【问题描述】：

我一直在尝试解决以下代码

<!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。谢谢

【问题讨论】：

    标签： javascript css tabs popup


    【解决方案1】：

    给你，这是我做的东西。

    我使它易于扩展，您所要做的就是将 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>

    【讨论】：

    • 很好，我看到你改进了它，以便一次只能打开一个标签，这是个好主意，但是第一个链接说“点击这里打开”怎么样？并且代码只能关闭不能最小化。它非常具有挑战性，我也在考虑这样的东西 $('.class1').toggleClass('.class2') 。
    • @John 你是什么意思它只能关闭不能最小化？你点击三角形了吗
    • @Weiss，对不起，我的意思是，如果在最小化选项卡上单击最大化按钮（三角形），它不会替换最大化选项卡，必须先关闭前一个，我可能只是使用此代码并像这样使用它，谢谢，但如果您有其他想法，请分享。 :)
    • @John 好的，我明白你的意思了。您可以在任何时候单击最大化按钮时进行设置，它将最小化类应用于所有具有 pop_out 类的元素，被单击的元素除外。
    • 是的，效果很好，我一直在摆弄它，但我无法创建一个超链接来首先调用该类，我的意思是我不想用最小化的选项卡开始页面，一个超链接最初应该打开选项卡，在它被最小化之前，请给我看这个，这样我就可以继续了。非常感谢:)。
    【解决方案2】：

    像这样...

    $(document).ready(function() {
  $('.show-popup').on('click', function() {
    $('.popup').fadeIn();
  });
  $('.close_pop').on('click', function() {
    $('.popup').fadeOut();
  });
});

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;
  }
};
    .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>

    现在我可以从链接打开了，非常感谢。

    【讨论】：

    • 看起来不错，只要您不希望能够单独打开每个弹出窗口 - 这需要一些返工。我很想看到最终产品的实施。另外，记得接受我的回答。
    • 我一直在尝试投票给你的答案，但我需要 15 个代表，我会尽快完成。
    猜你喜欢
    • 2021-09-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-10-16
    • 2013-05-27
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode