选项卡DIV停靠在浏览器中。点击

Question

我想对附图中所见的Divs做一些我无法弄清楚的事情。这些Div使用CSS Positioning停靠在浏览器的底角。我想使用CSS为每个选项卡添加一个选项卡，当用户点击选项卡部分时，它会在屏幕上上下滑动，只有隐藏的选项卡部分显示。现在，我在隐藏div的角落里有（x）。我宁愿在标签上而不是在div中使用标题文本。

任何关于使这个div成为选项卡的帮助以及关闭时对jquery滑动的一些想法会有所帮助。感谢。

.ib {
  background: #FFFAEA;
  border: solid #cab781 1px;
  display: inline-block;
  width:250px;
  height: 98%;
}
.narrow {
  width:150px;
}


    $(document).on('click', '#close1,#close2', function (e) {
        $(this).parent().fadeOut(500);

        e.stopPropagation();
    });

<footer id="footer" class="footer" runat="server">
    <div id="supportDiv" class="ib questionbg narrow" runat="server">
        <span id='close1'>x</span>
    </div>

    <div id="documentsDiv" class="ib" style="overflow:auto" runat="server">
        <span id='close2'>x</span>
        <asp:Label class="helpheader" runat="server">Help Documents</asp:Label>
        <div style="margin-left:20px; vertical-align:top">
            <asp:PlaceHolder id="documentList" runat="server"></asp:PlaceHolder>
        </div>
    </div>

</footer>

Answer 1

所以它有点粗糙，但在这里我用jQuery创建了tab控件DOM元素，并将它们作为.ib tab元素的第一个子元素插入。然后我让页脚监听选项卡控件元素的点击，并根据需要切换选项卡。您需要注意的是，如果用户选择其他选项卡，则在切换新选项时将其最后一个选项切换为关闭。

正如我所说，它有点粗糙。 Haven没有弄清楚为什么slideToggle在隐藏标签内容的过程中将其从容器el中分离出来，但是否则它似乎在做你正在寻找的东西。当然，你需要创建一些比我更漂亮的CSS。再次，粗糙。

＆＃13;

＆＃13;

/***
 * First, we have to create the tab-control functionality
 *  for each of our footer tab-panes
 ***/
$(".ib").each(function() {
  // For each tab, if it has a title, we can use that for our tab title.
  var tabEl = $(this);
  var tabTitle = tabEl.find(".helpheader").text();
  var leftPos = tabEl.index() * 130;
  // Create the tab control DOM structure...
  var tabBar = "<div class='tab-control'><span class='tab-title'>" + tabTitle + "</span></div>";
  // Insert that tab control as the first child of the tab.
  tabEl.children().first().before(tabBar);
  // Hide the rest of the tab elements, showing only the tab control.
  tabEl.find(":first-child").siblings().hide();
  // use the closedTab class on this tab
  tabEl.css("left", leftPos+"px").addClass("closedTab");
});


/****
 * Handler for clicks on the tab-control
 *  This should hide the tab-control, show the tab
 *  itself, change the class from closed to open, and
 *  reverse that process on any displayed siblings.
 ****/
$("#footer").on("click", ".tab-control", function() {
  // Get the specific tab element.
  var tabEl = $(this).parent();
  // hide the tab-control, and show the rest of the content.
  $(this).hide().siblings().show();
  // remove the closedTab class, add the openTab.
  tabEl.addClass("openTab").removeClass("closedTab");
  // This next line is doing a LOT -- it takes the current
  //  tabEl, and goes through any siblings marked as openTab,
  //  changes them from openTab to closedTab, and shows the
  //  tab-control and hides everything else.
  tabEl.siblings(".openTab")
    .removeClass("openTab")
    .addClass("closedTab")
    .find(":first-child")
    .show()
    .siblings()
    .slideToggle();
})
$("#footer").on('click', '.close', function(e) {
  // get the current tab element.
  var tabEl = $(this).parent();
  // toggle the current tab from openTab to closedTab.
  tabEl.addClass("closedTab").removeClass("openTab");
  // hide all content except the tab-control.
  tabEl.find(":first-child").show().siblings().slideToggle();
});

＆＃13;

.footer {
  position: fixed;
  bottom: 0;
  height: 100px;
}
.ib {
  display: inline-block;
  position: absolute;
  bottom: 0;
}

.ib-content {
  margin-left: 20px;
  vertical-align: top;
  position: relative;
}

.tab-control {
  width: 120px;
  height: 20px;
  background: #FFFAEA;
  border: solid #cab781 1px;
  overflow: off;
}

.closedTab {
}

.openTab {
  background: #FFFAEA;
  border: solid #cab781 1px;
  display: inline-block;
  width: 250px;
  height: 50px;
}

.narrow {
  width: 150px;
}
.close {
  position: relative;
  float: right;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<footer id="footer" class="footer" runat="server">
  <div id="supportDiv" class="ib questionbg narrow" runat="server">
    <span class='close'>x</span>
    <div class='ib-content'>
      <p>Proin eget tortor risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Cras ultricies ligula sed magna dictum porta. Nulla quis
        lorem ut libero malesuada feugiat. Donec sollicitudin molestie malesuada.</p>
    </div>
  </div>

  <div id="documentsDiv" class="ib" style="overflow:auto" runat="server">
    <span class='close'>x</span>
    <asp:Label class="helpheader" runat="server">Help Documents</asp:Label>
    <div class='ib-content'>
      <p>Nulla quis lorem ut libero malesuada feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla
        porttitor accumsan tincidunt.</p>
    </div>
  </div>

</footer>

＆＃13;

＆＃13;

＆＃13;