CSS вопрос меню вкладки

Question

это Javascript часть:

<script type="text/javascript"> 
jQuery(document).ready(function(){ 
    jQuery("ul#tabs li").click(function(e){ 
     if (!jQuery(this).hasClass("active")) { 
      var tabNum = jQuery(this).index(); 
      var nthChild = tabNum+1; 
      jQuery("ul#tabs li.active").removeClass("active"); 
      jQuery(this).addClass("active"); 
      jQuery("ul#tab li.active").removeClass("active"); 
      jQuery("ul#tab li:nth-child("+nthChild+")").addClass("active"); 
     } 
    }); 
}); 
</script> 

Это CSS часть:

ul#tabs { 
    list-style-type: none; 
    padding: 0; 
    border: 1px solid #F2F2F2; 
    font-size: 14px; 
    text-transform: uppercase; 
    font-weight: 700; 
} 
ul#tabs li { 
    display: inline-block; 
    padding: 10px 15px; 
    border-right: 1px solid #F2F2F2; 
    cursor: pointer; 
    color: #A5A5A5; 
} 
ul#tabs li:hover { 
    /*background-color: #238b68;*/ 
    color: #BA1707; 
} 
ul#tabs li.active { 
    margin: 0px 0px -1px; 
    color: #BA1707; 
    /*background-color: #238b68;*/ 
} 
ul#tab { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 
ul#tab li { 
    display: none; 
} 
ul#tab li.active { 
    display: block; 
} 

И, наконец, это HTML часть:

<div class="tabmenu"> 
      <ul id="tabs"> 
       <li class="active">Description</li> 
       <li>Reviews</li> 
       <li>Ask a question</li> 
      </ul> 
      <ul id="tab"> 
       <li class="active"> 
        <div class="product-attributes"> 
         <?php echo $this->getChildHtml('attributes');?> 
        </div> 
       </li> 
       <li> 
        <?php echo $this->getChildHtml('review_block');?> 
       </li> 
       <li> 
        <div class="support_box"> 
         <?php echo $this->getChildHtml('product.support') ?> 
        </div> 
       </li> 
      </ul> 
     </div> 

Вы можете см. результат в Fiddle

НО, моя проблема в том, когда активна вкладка. Я хочу очистить нижнюю границу. Как я могу это сделать? Заранее спасибо.

[UPDATE] Это, как я хочу выглядеть следующим образом: . Есть черная нижняя линия. Я хочу это . Остальное все хорошо

Answer 1

Вот решение с использованием z-index по существу охватывает нижнюю border в UL с белой каймой на активном LI:

ul#tabs li { 
    position: relative; 
    z-index: 5; 
    display: inline-block; 
    padding: 10px 15px; 
    border-right: 1px solid #F2F2F2; 
    cursor: pointer; 
    color: #A5A5A5; 
} 

Существует также проблема с пробелов междуLI элементы, отсюда теги комментариев в HTML, чтобы удалить эти надоедливые пространства, что в противном случае вызывало проблемы с шириной границ.

<ul id="tabs"> 
    <li class="active">Description</li><!-- 
    --><li>Reviews</li><!-- 
    --><li>Ask a question</li> 
</ul> 

Fiddle: https://jsfiddle.net/mn3g8u9a/

Answer 2

Проблема в том, что ваша граница находится на ul, но вы пытаетесь удалить границу с одного li. Чтобы исправить это:

Сначала переместите border: 1px solid #F2F2F2; с ul#tabs и на ul#tabs li.

Затем добавьте border-bottom: none; к ul#tabs li.active

Надежда, что помогает!

Answer 3

Смотрите эту скрипку:

https://jsfiddle.net/p2dk1txu/4/

имеет границу в <li> и когда активен пограничные изменения донные к нулю. Чтобы избежать полей вкладок, я положил font-size: 0 в закладки и font-size:14px в <li>. Потому что, используя встроенный блок, там есть пространство.

ul#tabs { 
     font-size:0; 
     list-style-type: none; 
     padding: 0; 
     text-transform: uppercase; 
     font-weight: 700; 
    } 
    ul#tabs li { 
     font-size: 14px; 
     display: inline-block; 
     padding: 10px 15px; 
     border: 1px solid #F2F2F2; 
     cursor: pointer; 
     color: #A5A5A5; 
    } 
    ul#tabs li:hover { 
     /*background-color: #238b68;*/ 
     color: #BA1707; 
    } 
    ul#tabs li.active { 
     margin: 0px 0px -1px; 
      border-bottom:0; 
     color: #BA1707; 
     /*background-color: #238b68;*/ 
    } 

Answer 4

Я думаю, что вы хотите, чтобы внешний вид, чтобы выглядеть следующим образом - https://jsfiddle.net/p2dk1txu/5/

, что я используется display: table-cell вместо display: inline-block и установить border-collapse: collapse, также границы были установлены на li вместо ul

Answer 5

.tabmenu {width:100%;} 
ul#tabs { 
    list-style-type: none; 
    padding: 0; 
    font-size: 14px; 
    text-transform: uppercase; 
    font-weight: 700; 
} 
ul#tabs li { 
    display: inline-block; 
    padding: 10px 15px; 
    border: 1px solid #F2F2F2; 
    cursor: pointer; 
    color: #A5A5A5; 
} 
ul#tabs li:hover { 
    /*background-color: #238b68;*/ 
    color: #BA1707; 
} 
ul#tabs li.active { 
    margin: 0px 0px -1px; 
    color: #BA1707; 
    border: 1px solid #F2F2F2; 
    border-bottom:transparent; 
    /*background-color: #238b68;*/ 
} 
ul#tab { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 
ul#tab li { 
    display: none; 
} 
ul#tab li.active { 
    display: block; 

} 

Answer 6

Добавить border-bottom:none в ul#tabs, а затем добавить border-bottom:1px solid #F2F2F2; на ul#tabs li , и добавить border-bottom:none в ul#tabs li.active.

Fiddle