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

时间:2016-08-02 09:50:36

标签: javascript html css

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

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

enter image description here

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

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

enter image description here

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

enter image description here

我的代码 - fiddle

2 个答案:

答案 0 :(得分:0)

这是解决方案。

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

      $('.tab1').addClass('current');
      $('.tab-content').css("border-top", "5px solid #3399CC");
      $('#tab-1').addClass('current');
    
  2. 删除jQuery .hover()以删除边框样式。
  3. Updated Fiddle

    示例代码段

    
    
    $(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"));
      });
    
    });
    
    .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;
    }
    
    <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;
    &#13;
    &#13;

答案 1 :(得分:-1)

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

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

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

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

相关问题