javascript - jQuery垂直制表符未知的间隙和对齐方式

已经为此工作了一段时间，但似乎无法使其正常工作。

首先，选项卡和内容之间存在间隙，我不确定如何在不使右侧偏左的情况下进行修复。



其次，选项卡本身在附加到内容区域时会遇到问题。我目前剩下的标签：-80px;为了将它们移出内容区域。但是，这样做似乎引起了问题，具体取决于用户浏览器的总体屏幕大小。



如果有人可以帮助我解决这个问题，那就太好了！

我已经做了JSFiddle供您测试。

var tabTitles = ["First Tab", "Second Tab", "Third Tab", "Fourth Tab", "Fifth Tab", "Sixth Tab"];

$(".tabHeader").click(function() {
  $(".tabHeader").removeClass("active");
  var position = $(this).position();
  var top = position.top;
  $(".active").css("top", top);
  $(this).addClass("active");
  var text = $(this).text().trim();
  switch (text) {
    case "Tab 1":
      $(".tabTitle").text(tabTitles[0]);
      break;
    case 'Tab 2':
      $(".tabTitle").text(tabTitles[1]);
      break;
    case 'Tab 3':
      console.log('yo');
      //$('.textBody').html('TEST!');
      $(".textBody").load("https://raw.githubusercontent.com/jiahaog/ajax-test-page/master/index.html", function(responseTxt, statusTxt, xhr) {

      });
      $(".tabTitle").text(tabTitles[2]);
      break;
    case 'Tab 4':
      $(".tabTitle").text(tabTitles[3]);
      break;
    case 'Tab 5':
      $(".tabTitle").text(tabTitles[4]);
      break;
    case 'Tab 6':
      $(".tabTitle").text(tabTitles[5]);
      break;
    default:
      $(".tabTitle").text("Select A TAB");
      break;

  }
});

body {
  background-color: white;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 12px;
}

.card {
  display: flex;
  flex-direction: row;
  background-color: white;
  margin: 0 auto;
  margin-top: 10px;
  width: 85%;
  height: 100%;
  box-shadow: 1px 2px 6px #d3d3d3;
  border-radius: 4px;
}

.tabHeader {
  width: 80px;
  height: 50px;
  background-color: #47bc8b;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.verticalTabs {
  position: relative;
  left: -80px;
  right: 0px;
  display: table-cell;
}

.active {
  position: relative;
  z-index: 50;
  width: 80px;
  height: 50px;
  background-color: #259162;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.tabText {
  position: absolute;
  color: white;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 12px;
  margin-top: 16px;
  margin-left: 23px;
}

.textHolder {
  margin: 10px;
  text-align: justify;
  overflow: scroll;
  overflow-x: hidden;
  width: 100%;
}

.tabTitle {
  font-size: 20px;
  font-weight: 600;
  padding: 0 0 20px 0;
}

<div class="tab-wrapper">

  <div class="card">
    <div class="verticalTabs">
      <div class="tabHeader active">
        <div class="tabText">Tab 1</div>
      </div>
      <div class="tabHeader">
        <div class="tabText">Tab 2</div>
      </div>
      <div class="tabHeader">
        <div class="tabText">Tab 3</div>
      </div>
      <div class="tabHeader">
        <div class="tabText">Tab 4</div>
      </div>
      <div class="tabHeader">
        <div class="tabText">Tab 5</div>
      </div>
      <div class="tabHeader">
        <div class="tabText">Tab 6</div>
      </div>
    </div>
    <div class="textHolder">
      <div class="tabTitle">First Tab</div>
      <div class="textBody"></div>
    </div>
  </div>

</div>

最佳答案

您真正需要做的就是将border-radius和box-shadow从.card移到.textHolder，然后可以从.verticalTabs删除位置，而不是使用margin分隔从.card，改为使用.textHolder。

var tabTitles = ["First Tab", "Second Tab", "Third Tab", "Fourth Tab", "Fifth Tab", "Sixth Tab"];

$(".tabHeader").click(function() {
  $(".tabHeader").removeClass("active");
  var position = $(this).position();
  var top = position.top;
  $(".active").css("top", top);
  $(this).addClass("active");
  var text = $(this).text().trim();
  switch (text) {
    case "Tab 1":
      $(".tabTitle").text(tabTitles[0]);
      break;
    case 'Tab 2':
      $(".tabTitle").text(tabTitles[1]);
      break;
    case 'Tab 3':
      console.log('yo');
      //$('.textBody').html('TEST!');
      $(".textBody").load("https://raw.githubusercontent.com/jiahaog/ajax-test-page/master/index.html", function(responseTxt, statusTxt, xhr) {

      });
      $(".tabTitle").text(tabTitles[2]);
      break;
    case 'Tab 4':
      $(".tabTitle").text(tabTitles[3]);
      break;
    case 'Tab 5':
      $(".tabTitle").text(tabTitles[4]);
      break;
    case 'Tab 6':
      $(".tabTitle").text(tabTitles[5]);
      break;
    default:
      $(".tabTitle").text("Select A TAB");
      break;

  }
});

body {
  background-color: white;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 12px;
}

.card {
  display: flex;
  flex-direction: row;
  background-color: white;
  margin: 0 auto;
  margin-top: 10px;
  width: 85%;
  height: 100%;
}

.tabHeader {
  width: 80px;
  height: 50px;
  background-color: #47bc8b;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.verticalTabs {
  position: relative;
  display: table-cell;
}

.active {
  position: relative;
  z-index: 50;
  width: 80px;
  height: 50px;
  background-color: #259162;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.tabText {
  position: absolute;
  color: white;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 12px;
  margin-top: 16px;
  margin-left: 23px;
}

.textHolder {
  padding: 10px;
  text-align: justify;
  overflow: scroll;
  overflow-x: hidden;
  width: 100%;
  box-shadow: 1px 2px 6px #d3d3d3;
  border-radius: 4px;
}

.tabTitle {
  font-size: 20px;
  font-weight: 600;
  padding: 0 0 20px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-wrapper">

  <div class="card">
    <div class="verticalTabs">
      <div class="tabHeader active">
        <div class="tabText">Tab 1</div>
      </div>
      <div class="tabHeader">
        <div class="tabText">Tab 2</div>
      </div>
      <div class="tabHeader">
        <div class="tabText">Tab 3</div>
      </div>
      <div class="tabHeader">
        <div class="tabText">Tab 4</div>
      </div>
      <div class="tabHeader">
        <div class="tabText">Tab 5</div>
      </div>
      <div class="tabHeader">
        <div class="tabText">Tab 6</div>
      </div>
    </div>
    <div class="textHolder">
      <div class="tabTitle">First Tab</div>
      <div class="textBody"></div>
    </div>
  </div>

</div>

关于javascript - jQuery垂直制表符未知的间隙和对齐方式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44444276/