单击时使用选项卡在页面底部显示隐藏内容
Show hidden content at bottom of page using tabs on click
所以我在页面底部有一组4个div。我希望这些div的顶部看起来像选项卡，当单击div（选项卡）时，该div的高度会增加，因此看起来像一个隐藏页面从窗口底部升起。
这是我到目前为止的代码：
---Css---
tab1 {
float: left;
width: 400px;
height: 100px;
background: red;
position: absolute;
left: 300px;
bottom: 0px;
clear:both;
}
tab2 {
width: 400px;
height: 100px;
border-radius: 10px 10px 0px 0px;
background: green;
position: absolute;
left: 400px;
bottom: 0px;
}
tab3 {
width: 400px;
height: 100px;
border-radius: 10px 10px 0px 0px;
background: red;
position: absolute;
left: 500px;
bottom: 0px;
}
tab4 {
width: 400px;
height: 100px;
border-radius: 10px 10px 0px 0px;
background: green;
position: absolute;
left: 600px;
bottom: 0px;
}
---HTML---
<tab1></tab1>
<tab2></tab2>
<tab3></tab3>
<tab4></tab4>
---JavaScript---
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"type="text/javascript"></script>
<script>
$('tab1').toggle(function(){
$(this).animate({'height': '500px'},{speed:10,});
}, function(){
$(this).animate({'height': '100px'},{speed:10, });
});
$('tab2').toggle(function(){
$(this).animate({'height': '500px'},{speed:10});
}, function(){
$(this).animate({'height': '100px'}, {speed:10});
});
$('tab3').toggle(function(){
$(this).animate({'height': '500px'},{speed:10,});
}, function(){
$(this).animate({'height': '100px'},{speed:10, });
});
$('tab4').toggle(function(){
$(this).animate({'height': '500px'},{speed:10});
}, function(){
$(this).animate({'height': '100px'}, {speed:10});
});
这里有一个jsfiddle来展示我所拥有的http://jsfiddle.net/tkTJr/
我想让每个div都是窗口宽度的100%，但仍然可以点击其他div。目前，如果我这样做了，我只能点击z索引最低的一个，因为它们是重叠的。我想让每个div的顶部像一个选项卡一样突出，以区分它们。这样做有什么帮助吗？
非常感谢，我希望有人知道这个问题的解决办法。
我尝试使用两种方法来实现这一点：
方法#1:Javascript/jQuery
我继续添加了一些功能，如果用户点击了选项卡的内容或选项卡，我会关闭"活动"选项卡。本质上，这只是切换选项卡的底部位置，并在每次用户点击选项卡时显示/隐藏（通过向上/向下滑动的方式）。下面是一个实时演示。如果你不想增加功能，这个小提琴会对你的很好
以下是具有增强功能的版本的相关代码：
<script> // The most important section for you
$('.tab').click(function (e) {
e.stopPropagation(); // allows the :not to function in the next .click function
var toggleBot = $(this).css('bottom') == "400px" ? "0px" : "400px";
// ^^ Clever way of toggling between two values
$(this).animate({
'bottom': toggleBot // Toggle the value
});
var number = $(this).attr('class').split(' ')[1]; // Get the number to relate to the content
if ($('.active')[0] && number != $('.active').attr('class').split(' ')[1]) {
// This part makes only one content stay open at a time
var number2 = $('.active').attr('class').split(' ')[1];
var toggleBot2 = $('.tab.' + number2).css('bottom') == "0px" ? "400px" : "0px";
$('.tab.' + number2).animate({
'bottom': toggleBot2
});
$('.content.' + number2).slideToggle().toggleClass('active');
}
$('.content.' + number).slideToggle().toggleClass('active');
});
$('.content').click(function(e) { // Again, allows the :not to function correctly below
e.stopPropagation();
});
$('body:not(.tab, .content)').click(function() {
// Allows the 'active' tab to be closed when the anything but a tab/content is clicked
var number2 = $('.active').attr('class').split(' ')[1];
$('.tab.' + number2).animate({
'bottom': '0'
});
$('.content.' + number2).slideToggle().toggleClass('active');
});
</script>
<style>
div {
text-align:center;
}
.tab {
width: 100px;
height: 50px;
border-radius: 10px 10px 0px 0px;
position: absolute; /* !!Important for functionality of tab!! */
bottom: 0px; /* !!Important for functionality of tab!! */
z-index:2;
}
.tab.one {
background: red;
left:10%;
}
.tab.two {
background: blue;
left:30%;
}
.tab.three {
background: yellow;
left:50%;
}
.tab.four {
background:green;
left:70%;
}
.content {
border-radius: 10px 10px 0px 0px;
position:absolute; /* !!Important for functionality of content!! */
display:none; /* !!Important for functionality of content!! */
bottom:0; /* !!Important for functionality of content!! */
left:0px;
background:black;
color:white;
height:400px;
width:100%;
z-index:1;
}
/* Just to add some content */
#mainContent {
position:relative;
width:25%;
height:75%;
clear:both;
}
</style>
<html> <!-- Note: they are all on the same level -->
<body>
<div id='#mainContent' style='position:relative; width:75%; height:75%; left:12.5%;'>Zombie ipsum content</div>
<div class='tab one'>Tab 1</div>
<div class='content one'>Content 1!</div>
<div class='tab two'>Tab 2</div>
<div class='content two'>Content 2!</div>
<div class='tab three'>Tab 3</div>
<div class='content three'>Content 3!</div>
<div class='tab four'>Tab 4</div>
<div class='content four'>Content 4!</div>
</body>
</html>
方法2:CSS
之前我使用基于<input>s和<label>s的CSS切换宽度/高度。这次我决定尝试只使用CSS来制作相同的选项卡，所以这是我的尝试。从本质上讲，它在选项卡周围放置了一个链接，并在单击时为其设置动画，同时在单击时也为内容的高度设置动画。它花了更少的时间来完成，我一直喜欢完整的CSS项目<3然而，这种方法并没有实现与jQuery方法相同的功能，这正是我所害怕的，并让我感到悲伤：（问题在下面的"功能说明"中描述
以下是仅使用CSS的方法的相关代码：
//No javascript, Yay!
<style>
div {
text-align:center;
}
.tab {
width: 100px;
height: 50px;
text-align:center;
border-radius: 10px 10px 0px 0px;
color:black;
position: absolute;
bottom: 0px;
z-index:2;
}
.tab.one {
background: red;
left:10%;
}
.tab.two {
background: blue;
left:30%;
}
.tab.three {
background: yellow;
left:50%;
}
.tab.four {
background:green;
left:70%;
}
#mainContent {
position:relative;
width:25%;
height:75%;
clear:both;
}
#wrapper { /* Allows the tabs to be at the bottom */
position:absolute;
bottom:0;
width:100%;
text-decoration: none;
}
.content {
border-radius: 10px 10px 0px 0px;
position:absolute;
bottom:0;
left:0px;
background:black;
color:white;
height:0px;
width:100%;
z-index:1;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-ms-transition:all 1s ease;
}
.hideUp {
display:block;
position:relative;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
-ms-transition:all 1s ease;
}
.hideUp:focus {
bottom: 400px;
}
.hideUp:focus + .content {
height:400px;
}
</style>
<html>
<body>
<div id='#mainContent' style='position:relative; width:75%; height:75%; left:12.5%;'>Zombie ipsum content.</div>
<div id='wrapper'>
<a href="#" tabindex="-1" class="hideUp"> <!-- Allows the CSS to know whether the tab has focus or not -->
<div class="tab one">Tab 1</div>
</a>
<div class="content">Content 1</div>
<a href="#" tabindex="-1" class="hideUp">
<div class="tab two">Tab 2</div>
</a>
<div class="content">Content 2</div>
<a href="#" tabindex="-1" class="hideUp">
<div class="tab three">Tab 3</div>
</a>
<div class="content">Content 3</div>
<a href="#" tabindex="-1" class="hideUp">
<div class="tab four">Tab 4</div>
</a>
<div class="content">Content 4</div>
</div>
</body>
</head>
用法说明：jQuery方法要求设备能够运行jQuery（当然），CSS方法要求用户使用允许CSS3转换的"现代"浏览器。我没有在CSS中包含所有的浏览器标签，只有webkit、mozilla和IE的标签。
功能说明：我使用的CSS方法不允许用户单击选项卡来"关闭"内容，他们必须单击其他任何位置。它还允许在点击内容时关闭选项卡，因此除非有人找到解决方案，否则它只能显示静态内容，如图像、文本等。
可以将CSS演示更改为仅在使用复选框破解点击选项卡时打开/关闭，允许选择内容和这样的
如果你想进一步解释其中的任何部分，请告诉我。我希望我能帮上忙！
相关文章：
- 如果同一页面上有多个谷歌地图，单击任何标记都会突出显示最底部的地图标记
- 如何在java脚本中显示引导程序底部的pophover图像点击
- 如何仅在向上滚动时将页脚粘贴到窗口底部会导致页脚不显示
- highcharts零值会在图的中间显示，而不是在底部显示
- 如何创建一个显示在窗口底部角落的DIV(经过一段时间后）
- 如何在底部显示 100px 时在滚动时触发 jquery 函数
- 删除浏览器底部在 jQuery UI 选项卡的鼠标悬停上显示的 URL
- 当用户从页面底部达到 X 像素时，如何显示 DIV
- 当在 Ul 上使用向上/向下箭头到达溢出自动项目的顶部/底部时显示隐藏的项目
- 悬停时在页面底部显示ADS
- 当用户滚动到页面底部时显示页脚
- 如何在没有在 PHP 或 JavaScript 中在页面底部显示地址的情况下打印文档
- D3 X轴不;t显示在底部
- 单击时使用选项卡在页面底部显示隐藏内容
- 为什么在IE加载图像没有显示在页面的底部
- 如何制作一个内容滑块，当用户垂直滚动或单击底部导航选项卡时显示下一张幻灯片
- Venobox在屏幕底部部分显示图像
- 数据表水平滚动条将显示在顶部而不是底部
- 如何显示动态增长的HTML页面的底部
- 即使窗口很小，也要在桌面底部显示按钮
