jquery - 标签内容 : Left Border Disconnected from Tabs Above

jquery - 标签内容 : Left Border Disconnected from Tabs Above - html CSS jQuery

转载作者：太空宇宙更新时间：2023-11-04 13:13:37

我正在尝试构建可重复使用的选项卡式内容。以下内容改编自 Shay Howe 的 jQuery 教程； catch HTML5/CSS3 技能。

我添加了边距以进一步突出显示该问题。一切都在现场，但左侧垂直边框与上方选项卡的左侧不对齐。在 CodePen 中工作，但在 Mozilla/IE 中实践失败。

有人知道如何解决这个问题吗？

HTML:

    <!DOCTYPE html>
<html lang="en">

  <head>
    <title>TAB TEST</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="assets/main.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:100,300,400">
  </head>

  <body>

<div class="tabs">
  <ul class="tabs-nav">
    <li><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
    <li><a href="#tab-3">Tab 3</a></li>
  </ul>

  <div class="tabs-stage">
      <div id="tab-1">
      <p>Text for tab 1.</p>
    </div>
    <div id="tab-2">
      <p>Text for tab 2.</p>
    </div>
      <div id="tab-3">
        <p>Text for tab 3.</p>
      </div>

  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="assets/script.js"></script>
    </body>
</html>

CSS:

 body {
  MARGIN: 1.5%
  color: #666;
  font: 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
} 

.tabs {
  max-width: 66.66666%;
  MARGIN-LEFT: 50px
}

.tabs-nav li {
  float: left;
  width: 33.33333%;
  list-style-type: none;
  }

.tabs-nav li:first-child a {
  border-right: 0;
  border-top-left-radius: 6px;
}

.tabs-nav li:last-child a {
  border-top-right-radius: 6px;
}

a {
  background: #eaeaed;
  border: 1px solid #cecfd5;
  color: #0087cc;
  display: block;
  font-weight: 600;
  padding: 10px 0;
  text-align: center;
  text-decoration: none;
}

a:hover {
  color: #ff7b29;
}

.tab-active a {
  background: #fff;
  border-bottom-color: transparent;
  color: #2db34a;
  cursor: default;
}

.tabs-stage {
  border: 1px solid #cecfd5;
  border-radius: 0px 0 6px 6px;
  border-top: 0;
  clear: both;
  padding: 30px 30px;
  position: relative;
  top: 0px;
}

jQuery(jscript):

    // Show the first tab by default
$('.tabs-stage div').hide();
$('.tabs-stage div:first').show();
$('.tabs-nav li:first').addClass('tab-active');

// Change tab class and display content
$('.tabs-nav a').on('click', function(event) {
  event.preventDefault();
  $('.tabs-nav li').removeClass('tab-active');
  $(this).parent().addClass('tab-active');
  $('.tabs-stage div').hide();
  $($(this).attr('href')).show();
});

最佳答案

$('.tabs-stage div').hide();
$('.tabs-stage div:first').show();
$('.tabs-nav li:first').addClass('tab-active');

// Change tab class and display content
$('.tabs-nav a').on('click', function(event) {
  event.preventDefault();
  $('.tabs-nav li').removeClass('tab-active');
  $(this).parent().addClass('tab-active');
  $('.tabs-stage div').hide();
  $($(this).attr('href')).show();
});

body {
  MARGIN: 1.5%
  color: #666;
  font: 14px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
} 

.tabs {
  max-width: 66.66666%;
  MARGIN-LEFT: 50px
}

.tabs-nav li {
  float: left;
  width: 33.33333%;
  list-style-type: none;
  }

.tabs-nav li:first-child a {
  border-right: 0;
  border-top-left-radius: 6px;
}

.tabs-nav li:last-child a {
  border-top-right-radius: 6px;
}
.tabs-nav {
	padding-left: 0;}

a {
  background: #eaeaed;
  border: 1px solid #cecfd5;
  color: #0087cc;
  display: block;
  font-weight: 600;
  padding: 10px 0;
  text-align: center;
  text-decoration: none;
}

a:hover {
  color: #ff7b29;
}

.tab-active a {
  background: #fff;
  border-bottom-color: transparent;
  color: #2db34a;
  cursor: default;
}

.tabs-stage {
  border: 1px solid #cecfd5;
  border-radius: 0px 0 6px 6px;
  border-top: 0;
  clear: both;
  padding: 30px 30px;
  position: relative;
  top: 0px;
}

<body>

<div class="tabs">
  <ul class="tabs-nav">
    <li><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
    <li><a href="#tab-3">Tab 3</a></li>
  </ul>

  <div class="tabs-stage">
      <div id="tab-1">
      <p>Text for tab 1.</p>
    </div>
    <div id="tab-2">
      <p>Text for tab 2.</p>
    </div>
      <div id="tab-3">
        <p>Text for tab 3.</p>
      </div>

  </div>
</div>

尝试添加 padding-left: 0;到你的 ul class="tabs-nav"

关于jquery - 标签内容 : Left Border Disconnected from Tabs Above - html CSS jQuery，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30658203/

文章推荐： C++ Winsock 下载文件切断 HTTP header

文章推荐： html - textareafield 背景颜色没有完全改变

文章推荐： java - 在Elasticsearch中，如何在聚合级别应用过滤器

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

jquery - 标签内容 : Left Border Disconnected from Tabs Above - html CSS jQuery