Javascript 使用单击时的选项卡在页面底部显示隐藏内容

因此，我在页面底部有一组4个div。我希望这些div的顶部看起来像tab，当单击div（tab）时，该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});
 });

——Css---
表1{
浮动：左；
宽度：400px；
高度：100px；
背景：红色；
位置：绝对位置；
左：300px；
底部：0px；
明确：两者皆有；
}
表2{
宽度：400px；
高度：100px；
边界半径：10px 10px 0px 0px；
背景：绿色；
位置：绝对位置；
左：400px；
底部：0px；
} 
表3{
宽度：400px；
高度：100px；
边界半径：10px 10px 0px 0px；
背景：红色；
位置：绝对位置；
左：500px；
底部：0px；
}
表4{
宽度：400px；
高度：100px；
边界半径：10px 10px 0px 0px；
背景：绿色；
位置：绝对位置；
左：600px；
底部：0px；
}
---HTML---
---JavaScript---
$（'tab1'）。切换（函数（）{
$（this.animate（{'height'：'500px'}，{speed:10，}）；
}，函数（）{
$（this.animate（{'height'：'100px'}，{speed:10，}）；
});
$（'tab2'）。切换（函数（）{
$（this.animate（{'height'：'500px'}，{speed:10}）；
}，函数（）{
$（this.animate（{'height'：'100px'}，{speed:10}）；
});
$（'tab3'）。切换（函数（）{
$（this.animate（{'height'：'500px'}，{speed:10，}）；
}，函数（）{
$（this.animate（{'height'：'100px'}，{speed:10，}）；
});
$（'tab4'）。切换（函数（）{
$（this.animate（{'height'：'500px'}，{speed:10}）；
}，函数（）{
$（this.animate（{'height'：'100px'}，{speed:10}）；
});

下面是一个jsfiddle来演示我所拥有的

我想允许每个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>

//对您来说最重要的部分
$（'.tab'）。单击（函数（e）{
e、 stopPropagation（）；//允许：在下一个中不起作用。单击函数
var-toggleBot=$（this.css（'bottom'）==“400px”？“0px”：“400px”；
//^^在两个值之间切换的聪明方法
$（此）。设置动画({
“底部”：toggleBot//切换值
});
var number=$（this.attr（'class'）.split（“”）[1]；//获取与内容相关的数字
if（$（'.active'）[0]&&number！=$（'.active'）.attr（'class'）.split（''）[1]）{
//此部分一次仅使一个内容保持打开状态
var number2=$（'.active'）.attr（'class'）.split（''）[1]；
变量toggleBot2=$（'.tab.'+number2.css（'bottom'）==“0px”？“400px”：“0px”；
$（'.tab.'+number2）.设置动画({
“底部”：切换到2
});
$（'.content.'+number2.slideToggle（）.toggleClass（'active'）；
}
$（'.content.'+number）.slideToggle（）.toggleClass（'active'）；
});
$（'.content'）。再次单击（函数（e）{//，将允许：无法在下面正确运行
e、 停止传播（）；
});
$（'body:not（.tab，.content'）。单击（函数（）{
//允许在单击除选项卡/内容以外的任何内容时关闭“活动”选项卡
var number2=$（'.active'）.attr（'class'）.split（''）[1]；
$（'.tab.'+number2）.设置动画({
“底部”：“0”
});
$（'.content.'+number2.slideToggle（）.toggleClass（'active'）；
});
div{
文本对齐：居中；
}
.标签{
宽度：100px；
高度：50px；
边界半径：10px 10px 0px 0px；
位置：绝对；/*！！对于选项卡的功能非常重要*/
底部：0px；/*！！对于选项卡的功能非常重要*/
z指数：2；
}
.表一{
背景：红色；
左：10%；
}
.表二{
背景：蓝色；
左：30%；
}
.表三{
背景：黄色；
左：50%；
}
.表四{
背景：绿色；
左：70%；
}
.内容{
边界半径：10px 10px 0px 0px；
位置：绝对；/*！！对于内容的功能非常重要*/
显示：无；/*！！对于内容的功能很重要*/
底部：0；/*！！对于内容的功能非常重要*/
左：0px；
背景：黑色；
颜色：白色；
高度：400px；
宽度：100%；
z指数：1；
}
/*只是为了增加一些内容*/
#主要内容{
位置：相对位置；
宽度：25%；
身高：75%；
明确：两者皆有；
}
僵尸ipsum内容
表1
内容1！
表2
内容2！
表3
内容3！
表4
内容4！

方法#2:CSS

---

之前，我根据

s和

s使用CSS切换宽度/高度。这次我决定尝试只使用CSS来创建相同的选项卡，所以。本质上，它会在选项卡周围放置一个链接，并在单击时为其设置动画，同时在单击时为内容的高度设置动画。完成CSS项目所需的工作量要小得多，我一直喜欢完整的CSS项目。你到底想要什么不同？你能把“我的问题是…”这句话改清楚吗？我希望这样，如果我把每个分区的页宽设为100%，我仍然可以点击任何一个分区。现在如果我这样做了，我只能点击z指数最低的那个。我在考虑让每个分区的顶部都像一个标签一样突出，以便区分

//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>