Question

需要一些关于页面标签的帮助。

1）我的页面上有以下标签。

默认情况下，当页面加载时，没有突出显示选项卡。我希望默认情况下突出显示“业务系统功能”选项卡。我如何实现这一目标？

2）当我选择标签时，标签颜色和边框颜色相同。

但是当我将鼠标悬停在任何其他标签上时，边框的颜色会变为hover颜色。我不想要这个。我希望仅在单击选项卡时才更改边框颜色。我该如何实现这一目标？

我的代码 - fiddle

Answer 1

这是解决方案。

在页面加载时将.tab1设为当前/选中状态。将以下代码添加到$(document).ready()。

  $('.tab1').addClass('current');
  $('.tab-content').css("border-top", "5px solid #3399CC");
  $('#tab-1').addClass('current');

删除jQuery .hover()以删除边框样式。

Updated Fiddle

示例代码段

＆＃13;

$(document).ready(function() {
  /* Apply current on Page load */
  $('.tab1').addClass('current');
  $('.tab-content').css("border-top", "5px solid #3399CC");
  $('#tab-1').addClass('current');

  $('ul.tabs li').click(function() {

    var contentid = '#' + $(this).attr('datatab');

    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $(contentid).addClass('current').css("border-top", "5px solid " + $(this).css("background-color"));
  });

});

＆＃13;

.home-tab-title {
  width: 100%;
  height: 65px;
  padding: 10px 0 10px 0;
}
img.home-duck {
  width: 35px;
  float: left;
  padding: 12px 10px 0 0;
}
.home-heading {
  display: block;
  float: left;
  font-size: 22px;
  margin-top: 20px;
  margin-bottom: 20px;
  clear: right;
  font-family: "Segoe UI", arial, sans-serif;
}
.home-subheading {
  margin-top: 10px;
  margin-bottom: 10px;
}
.home-subheading {
  font-size: 15px;
  color: #000;
  font-weight: 500;
  font-family: "Segoe UI", arial, sans-serif;
  display: inline-flex;
}
.tab-content1 {
  margin-left: 2.2em;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: left;
}
.tab-content1-block {
  padding: 0 1em 1em .5em;
  min-width: 30%;
}
.tab-content1-block ul li {
  margin-bottom: 10px;
  margin-left: -22px;
}
— css —
/* Hide the user navigation for community and anon on home. Shows it for pro members. */

.columbia-page-home .elm-header-user-nav {
  display: none;
}
.columbia-page-home.elm-user-pro-member.columbia-page-home .elm-header-user-nav {
  display: block;
}
/* Hide the user navigation for community and anon on home. */

.columbia-page-home .elm-header-home-nav {
  display: none;
}
/* Hides the user nav's global search on home. */

.columbia-page-home .elm-global-search {
  visibility: hidden;
}
/* Sets the correct positioning of the footer based on user role for home only. */

.columbia-page-home .elm-footer {
  bottom: auto;
}
@media all and (min-width: 78.75em) {
  .elm-user-pro-member.columbia-page-home .elm-footer {
    bottom: 3.4em;
  }
}
@media all and (min-width: 37.5em) {
  .elm-user-pro-member.columbia-page-home .elm-footer {
    bottom: auto;
  }
}
li.ui-state-active {
  padding-bottom: 0px !important;
}
— css —
/* Code for PageTabs template */

body .ui-tabs .ui-tabs-nav li a {
  padding: .5em 1em;
  width: 225px;
  word-wrap: initial;
  height: 25px;
  text-align: center;
  display: inline-block;
}
— css —
/* Code for new tabs */

. body {
  margin-top: 100px;
  font-family: 'Trebuchet MS', serif;
  line-height: 1.6 float: left;
}
container {
  width: auto;
  margin: 0 0;
}
ul.tabs {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
ul.tabs li {
  background: #EFEFEF;
  color: #222;
  display: inline-block;
  padding: 10px 15px;
  cursor: pointer;
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-radius: 5px 5px 0px 0px;
}
.tab1:hover {
  background: #3399CC;
  color: #fff;
  border: none;
}
.tab2:hover {
  background: #12B58A;
  color: #fff;
  border: none;
}
.tab3:hover {
  background: #673ab7;
  color: #fff;
  border: none;
}
.tab4:hover {
  background: #336699;
  color: #fff;
  border: none;
}
.tab5:hover {
  background: #3399CC;
  color: #fff;
  border: none;
}
.tab6:hover {
  background: #12B58A;
  color: #fff;
  border: none;
}
.tab7:hover {
  background: #673ab7;
  color: #fff;
  border: none;
}
.tab8:hover {
  background: #336699;
  color: #fff;
  border: none;
}
.tab9:hover {
  background: #3399CC;
  color: #fff;
  border: none;
}
.tab10:hover {
  background: #12B58A;
  color: #fff;
  border: none;
}
.tab11:hover {
  background: #673ab7;
  color: #fff;
  border: none;
}
.tab-link.tab1.current {
  background: #3399CC;
  color: #fff;
  border: none;
}
.tab-link.tab2.current {
  background: #12B58A;
  color: #fff;
  border: none;
}
.tab-link.tab3.current {
  background: #673ab7;
  color: #fff;
  border: none;
}
.tab-link.tab4.current {
  background: #336699;
  color: #fff;
  border: none;
}
.tab-link.tab5.current {
  background: #3399CC;
  color: #fff;
  border: none;
}
.tab-link.tab6.current {
  background: #12B58A;
  color: #fff;
  border: none;
}
.tab-link.tab7.current {
  background: #673ab7;
  color: #fff;
  border: none;
}
.tab-link.tab8.current {
  background: #336699;
  color: #fff;
  border: none;
}
.tab-link.tab9.current {
  background: #3399CC;
  color: #fff;
  border: none;
}
.tab-link.tab10.current {
  background: #12B58A;
  color: #fff;
  border: none;
}
.tab-link.tab11.current {
  background: #673ab7;
  color: #fff;
  border: none;
}
.tab-content {
  display: none;
  background: #ededed;
  padding: 15px;
}
.tab-content.current {
  display: inherit;
  border-top: 5px solid #3399CC;
  background: #ffffff;
}
.tab-link {
  margin: 0px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">

  <ul class="tabs">
    <li class="tab-link tab1" datatab="tab-1">'Business System Functionality'</li>
    <li class="tab-link tab2" datatab="tab-2">'Product'</li>
    <li class="tab-link tab3" datatab="tab-3">'Environment Administration'</li>
    <li class="tab-link tab4" datatab="tab-4">'Training'</li>
    <li class="tab-link tab5" datatab="tab-5">'Release Notes'</li>
    <li class="tab-link tab6" datatab="tab-6">'Architecture'</li>
    <li class="tab-link tab7" datatab="tab-7">'Testing'</li>
    <li class="tab-link tab8" datatab="tab-8">'System Administration'</li>
    <li class="tab-link tab9" datatab="tab-9">'Site Management'</li>
    <li class="tab-link tab10" datatab="tab-10">'Staging'</li>
    <li class="tab-link tab11" datatab="tab-11">'Regulatory Compliance Board'</li>
  </ul>


  <div id="tab-1" class="tab-content current">
    Business System Functionality
  </div>

</div>

＆＃13;

Answer 2

1）添加一个类，例如与您的悬停相同的active

.tab1:hover, .tab1.active {
  background: #3399CC;
  color: #fff;
  border: none;
}

添加该类将突出显示您的元素

2）边框颜色根本不会改变，因为您要移除边框，border: none;设置另一个border-color或保持原样。

HTML和CSS中的选项卡颜色问题

2 个答案: