如何将代码集中在此代码中？

时间：2017-09-27 17:06:16

标签： javascript jquery html css tabs

我仍然不擅长制作自己的资料，因此我一直在尝试编辑免费使用代码。但是，我特意遇到了这个问题。

虽然我在（Forumotion）上使用它的网站确实摆脱了你可能在这里看到的奇怪的空白区域。尽管我已经搜索了解决方案并调整了CSS，但我还是无法将标签放在中心位置而不会让所有问题变得困难。

我已经在Forumotion和JSFiddle中多次调整了这一点，看看是否可能是Forumotion的问题。然而，似乎没有任何工作。我认为可能是我在CSS和HTML中缺乏完整的知识和理解，或者是最初制作这个的人，但我很感激任何人都可以给予帮助。

SOURCE CODE

＆＃13;
＆＃13; 
jQuery(document).ready(function() {
  jQuery('.tabs .tab-links a').on('click', function(e) {
    var currentAttrValue = jQuery(this).attr('href');

    // Show/Hide Tabs
    jQuery('.tabs ' + currentAttrValue).show().siblings().hide();

    // Change/remove current tab to active
    jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

    e.preventDefault();
  });
});
＆＃13; 
.tabs {
  width: 100%;
  display: inline-block;
}

.tab-links:after {
  display: block;
  clear: both;
  content: '';
}

.tab-links li {
  margin: 0px 5px;
  float: left;
  list-style: none;
}

.tab-links a {
  padding: 10px 15px;
  display: inline-block;
  background: #7FB5DA;
  font-size: 14px;
  font-weight: 600;
  color: #4c4c4c;
  transition: all linear 0.15s;
}

.tab-links a:hover {
  background: #a7cce5;
  text-decoration: none;
}

li.active a,
li.active a:hover {
  background: #fff;
  color: #4c4c4c;
}

.tab-content {
  padding: 15px;
  border-radius: 3px;
  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
  background: #fff;
}

.tab {
  display: none;
}

.tab.active {
  display: block;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
  <ul class="tab-links">
    <li class="active"><a href="#tab1">Tab #1</a></li>
    <li><a href="#tab2">Tab #2</a></li>
    <li><a href="#tab3">Tab #3</a></li>
    <li><a href="#tab4">Tab #4</a>
    </li>
  </ul>
  <div class="tab-content">
    <div id="tab1" class="tab active">
      <p>Tab #1 content goes here!</p>
      <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis.</p>
    </div>

    <div id="tab2" class="tab">
      <p>Tab #2 content goes here!</p>
      <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod
        tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
    </div>

    <div id="tab3" class="tab">
      <p>Tab #3 content goes here!</p>
      <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum ri.</p>
    </div>

    <div id="tab4" class="tab">
      <p>Tab #4 content goes here!</p>
      <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod
        tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：1)

我认为您应该考虑将display: flex用于.tab-links元素：

div.tabs {
    width: 100vw;
}
.tab-links {
    display: flex;
    justify-content: space-around
}

所以现在没有<ul>是一个弹性容器，并且通过围绕空间进行证明，它将标签集中在

中

答案 1 :(得分：1)

使用display：inline-block和text-center进行检查，您可以创建中心选项卡

jQuery(document).ready(function() {
  jQuery('.tabs .tab-links a').on('click', function(e) {
    var currentAttrValue = jQuery(this).attr('href');

    // Show/Hide Tabs
    jQuery('.tabs ' + currentAttrValue).show().siblings().hide();

    // Change/remove current tab to active
    jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

    e.preventDefault();
  });
});
.tabs {
  width: 100%;
  display: inline-block;
}

.tab-links{
text-align:center;
padding-left:0px;}

.tab-links:after {
  display: block;
  clear: both;
  content: '';
}

.tab-links li {
  margin: 0px 5px;
  display:inline-block;
  list-style: none;
}

.tab-links a {
  padding: 10px 15px;
  display: inline-block;
  background: #7FB5DA;
  font-size: 14px;
  font-weight: 600;
  color: #4c4c4c;
  transition: all linear 0.15s;
}

.tab-links a:hover {
  background: #a7cce5;
  text-decoration: none;
}

li.active a,
li.active a:hover {
  background: #fff;
  color: #4c4c4c;
}

.tab-content {
  padding: 15px;
  border-radius: 3px;
  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
  background: #fff;
}

.tab {
  display: none;
}

.tab.active {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs">
  <ul class="tab-links">
    <li class="active"><a href="#tab1">Tab #1</a></li>
    <li><a href="#tab2">Tab #2</a></li>
    <li><a href="#tab3">Tab #3</a></li>
    <li><a href="#tab4">Tab #4</a>
    </li>
  </ul>
  <div class="tab-content">
    <div id="tab1" class="tab active">
      <p>Tab #1 content goes here!</p>
      <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis.</p>
    </div>

    <div id="tab2" class="tab">
      <p>Tab #2 content goes here!</p>
      <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod
        tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
    </div>

    <div id="tab3" class="tab">
      <p>Tab #3 content goes here!</p>
      <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum ri.</p>
    </div>

    <div id="tab4" class="tab">
      <p>Tab #4 content goes here!</p>
      <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod
        tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
    </div>
  </div>
</div>

答案 2 :(得分：0)

这将使标签居中。

.tab-links {
    margin: auto;
    padding: 0;
    text-align: center;
}
.tab-links > li {
    margin: 0px 5px;
    float: none; //remove floats
    list-style: none;
    display: inline-block;
}
相关问题
最新问题