Question

我正在使用Bootstrap 3响应创建合理的标签。对于每个标签，我想要地图图像，如附图所示。无法查看地图图像。

enter image description here

HTML：

<div role="tabpanel">

    <!-- Nav tabs -->
    <ul class="nav nav-tabs nav-justified" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab" id="America"><span>The Americas</span></a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Europe</a></li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Asia/Pacific</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">The Americas content</div>
        <div role="tabpanel" class="tab-pane" id="profile" id="Europe">Europe content</div>
        <div role="tabpanel" class="tab-pane" id="settings" id="Asia">Asia/Pacific content</div>
    </div>

</div>

CSS：

.nav-tabs.nav-justified > li.active > a {
    border-bottom:4px solid #093!important;
    border-top:0;
    border-left:0;
    border-right:1px solid #fff;
    background-color:#fff;
    color:#000!important;
}

.nav-tabs.nav-justified > li > a {
    border-top:0!important;
    border-bottom:0;
    border-left:0;
    border-right:1px solid #fff;
    background-color:#0a3c91;
    border-radius:0;
    color:#fff!important;
}

.nav-tabs.nav-justified > li.active > a#America:active {
    background:url(http://bestindiatravel.net/Monica/mapAmericaActive.png) no-repeat center;
    border-bottom:4px solid #093!important;
    border-top:0;
    border-left:0;
    border-right:1px solid #fff;
    background-color:#fff;
    color:#000!important;
}

.nav-tabs.nav-justified > li.active > a#America {
    background:url(http://bestindiatravel.net/Monica/mapAmerica.png) no-repeat center;
    border-bottom:4px solid #093!important;
    border-top:0;
    border-left:0;
    border-right:1px solid #fff;
    background-color:#fff;
    color:#000!important;
}

.nav-tabs.nav-justified > li.active > a#Europe:active {
    background:url(http://bestindiatravel.net/Monica/mapEuropeActive.png) no-repeat center;
    border-bottom:4px solid #093!important;
    border-top:0;
    border-left:0;
    border-right:1px solid #fff;
    background-color:#fff;
    color:#000!important;
}

.nav-tabs.nav-justified > li.active > a#Europe {
    background:url(http://bestindiatravel.net/Monica/mapEurope.png) no-repeat center;
    border-bottom:4px solid #093!important;
    border-top:0;
    border-left:0;
    border-right:1px solid #fff;
    background-color:#fff;
    color:#000!important;
}

.nav-tabs.nav-justified > li.active > a#Asia:active {
    background:url(http://bestindiatravel.net/Monica/mapAsiaActive.png) no-repeat center;
    border-bottom:4px solid #093!important;
    border-top:0;
    border-left:0;
    border-right:1px solid #fff;
    background-color:#fff;
    color:#000!important;
}

.nav-tabs.nav-justified > li.active > a#Asia {
    background:url(http://bestindiatravel.net/Monica/mapAsia.png) no-repeat center;
    border-bottom:4px solid #093!important;
    border-top:0;
    border-left:0;
    border-right:1px solid #fff;
    background-color:#fff;
    color:#000!important;
}

请帮忙。

Answer 1

这应该让你接近你想要的。它仍然需要你格式化几个部分，比如悬停在效果上，但总体结构适合你。

Fiddle Demo

我在代码中注意到的一个主要问题是在链接上使用了:active。 :active伪类仅用于在单击链接时定义样式。在这里，你实际上想要一些基于类的样式。

.nav-tabs.nav-justified > li.active > a#America:active

而不是你应该这样做：

.nav-tabs.nav-justified > li.active > a#America

在HTML中，我修改了您尝试执行此操作的方式。我已经为地图和地图文本添加了单独的标签。这样可以更轻松地设置要分隔两个区域的线条的样式。一旦我这样做了，我就对你的CSS进行了一些调整。

<div style="height: 100px">
    <!--Space element just to get it off the panel splitter.-->
</div>
<div role="tabpanel">
  <!-- Nav tabs -->
  <ul class="nav nav-tabs nav-justified" role="tablist">
      <li role="presentation" class="active">
          <a href="#home" aria-controls="home" role="tab" data-toggle="tab">
              <span class="map" id="America">&nbsp;</span>
              <span class="mapText">The Americas</span>
          </a>
      </li>
      <li role="presentation">
          <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">
              <span class="map" id="Europe">&nbsp;</span>
              <span class="mapText">Europe</span>
          </a>
      </li>
      <li role="presentation">
          <a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">
              <span class="map" id="Asia">&nbsp;</span>
              <span class="mapText">Asia/Pacific</span>
          </a>
      </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">The Americas content</div>
    <div role="tabpanel" class="tab-pane" id="profile" id="Europe">Europe content</div>
      <div role="tabpanel" class="tab-pane" id="settings" id="Asia">Asia/Pacific content</div>
  </div>

</div>

这是CSS：

.nav-tabs.nav-justified > li > a {
    border: none !important;
    border-radius:0;
    padding: 0;
    text-transform: uppercase;
}

.nav-tabs.nav-justified > li > a:hover {
    border: none;
    border-radius:0;
    background-color: inherit !important;
}

.nav-tabs.nav-justified > li > a > .mapText {
    border: none;
    border-top:4px solid #FFF!important;
    display: block;
    background-color:#0a3c91;
    color:#fff;
    padding: 20px 0;
}

.nav-tabs.nav-justified > li.active > a > .mapText {
    border-top:4px solid #093!important;
    background-color: #FFF;
    color: #000;    
}

.nav-tabs.nav-justified > li > a > .map {
    border: none;
    height: 90px;
    margin-bottom: 15px;
    display: block;
}

.nav-tabs.nav-justified > li.active > a {
    border-right:1px solid #fff;
    background-color:#fff;
}

.nav-tabs.nav-justified > li.active > a > #America {
    background:url('http://bestindiatravel.net/Monica/mapAmericaActive.png') no-repeat center;
}

.nav-tabs.nav-justified > li > a > #America {
    background:url('http://bestindiatravel.net/Monica/mapAmerica.png') no-repeat center;
}

.nav-tabs.nav-justified > li.active > a > #Europe {
    background:url('http://bestindiatravel.net/Monica/mapEuropeActive.png') no-repeat center;
}

.nav-tabs.nav-justified > li > a > #Europe {
    background:url('http://bestindiatravel.net/Monica/mapEurope.png') no-repeat center;
}

.nav-tabs.nav-justified > li.active > a > #Asia {
    background:url('http://bestindiatravel.net/Monica/mapAsiaActive.png') no-repeat center;
}

.nav-tabs.nav-justified > li > a > #Asia {
    background:url('http://bestindiatravel.net/Monica/mapAsia.png') no-repeat center;
}

在Bootstrap 3中为合理的选项卡创建css

1 个答案: