Отображение горизонтальных и вертикальных линий между вкладками

Мы показываем 4 вкладки в site, как показано ниже.Отображение горизонтальных и вертикальных линий между вкладками

мы хотим отобразить горизонтальные и вертикальные линии между каждой вкладки, как показано ниже изображения.

window.changeTab = function(tabNum){ 
 
     tablinks = document.getElementsByClassName("tabs"); 
 
     for(i = 0; i < tablinks.length; i++){ 
 
      tablinks[i].className = tablinks[i].className.replace(" active",""); 
 
      if(i == tabNum){ 
 
       tablinks[i].className += " active"; 
 
      } 
 
     } 
 
     tabs = document.getElementsByClassName("tab-text"); 
 
     for(i = 0; i < tabs.length; i++){ 
 
      tabs[i].className = tabs[i].className.replace(" active",""); 
 
      if(i == tabNum){ 
 
       tabs[i].className += " active"; 
 
      } 
 
     } 
 
    }

.tabs{ 
 
     display:inline-block; 
 
     width:25%; 
 
     float:left; 
 
     height:45px; 
 
     line-height:45px; 
 
     cursor:pointer; 
 
     background:#FFFFFF; 
 
     color:#000000; 
 
     font-size:19px; 
 
     text-align:center; 
 
    } 
 
    .tabs:hover{ 
 
     text-decoration:underline; 
 
    } 
 
    .tabs.active{ 
 
     cursor:default; 
 
\t \t background:#ff7704; 
 
    } 
 
    .tabs.active:hover{ 
 
     text-decoration:none; 
 
    } 
 
    .tab-text{ 
 
     display:none; 
 
     width:100%; 
 
     height:auto; 
 
     padding:0; 
 
    } 
 
    .tab-text.active{ 
 
     display:block; 
 
    }

<div id="tab-container"> 
 
    <div class="tabs active" onclick="changeTab(0)">Product Description</div> 
 
    <div class="tabs" onclick="changeTab(1)">Features</div> 
 
<div class="tabs" onclick="changeTab(2)">Reviews</div> 
 
<div class="tabs" onclick="changeTab(3)">Add Review</div> 
 
    <div id="tab-1" class="tab-text active"> 
 
     <div class="next-content-product"> 
 

 
<h1>Product Description </h1> 
 
<?php echo $_product->getDescription();?> 
 

 
<div class="size-space"> 
 
<h1>Product Size & Space <span class="hidden-sku"><?php echo $_product->getSku();?></span> </h1> 
 

 

 
<?php echo $attribute_value = $_product->getData('size_space');?> 
 
</div> 
 

 
           
 
</div> 
 
    </div> 
 
    <div id="tab-2" class="tab-text"> 
 
     <div class="next-level-content-product"> 
 
<div class="interior-exterior"> 
 

 
<?php echo $attribute_value = $_product->getData('interior_exterior');?> 
 
\t \t \t \t \t \t \t \t \t 
 
</div> 
 
</div> 
 
    </div> 
 
    <div id="tab-3" class="tab-text"> \t 
 
    INSERT THIRD TAB CONTENT HERE \t \t  
 
    </div> 
 
\t 
 
    <div id="tab-4" class="tab-text"> \t  
 
\t INSERT FOURTH TAB CONTENT HERE \t  
 
    </div> 
 
</div>

Это Magento сайт электронной коммерции.

Пожалуйста, помогите найти решение проблемы.

Заранее спасибо.

источник

2016-07-05 fresher

Любая проблема, чтобы сделать это с помощью CSS ребенка? – GONG

Можете ли вы, пожалуйста, помочь мне, как я могу сделать с ребенком css. – fresher

Возможно, что-то вроде этого? (#636363, кажется, правильный цвет в соответствии с вашими link)

.tabs:first-child{ 
     border-left: 2px solid #636363; 
} 
.tabs{ 
     border-right: 2px solid #636363; 
     border-top: 2px solid #636363; 
     border-bottom: 2px solid #636363; 
}

источник

2016-07-05 10:32:22

спасибо, он отлично работал. если вы заметили [link] (http://sbdev2.kidsdial.com/beer-is-what-makes-you-see-double-and-feel-single-apple-iphone-4-phone-case.html?___store = europe & ___ from_store = europe), мы используем один и тот же цвет для 'add to cart' и' product description', но 'product description' не отображает тот же цвет фона, см. здесь http://prnt.sc/bp0t9u – fresher

Вы уверены ? Цвет фона тот же (# FF7704) как для 'add to cart', так и для' product description' (проверено, что с ColorZilla) –

Я использую это: '# ff7704;' Возможно, я ошибаюсь, пожалуйста, дайте мне то, что мне нужно использовать для отображения цвета фона для 'Product decription' – fresher

Ваш Вкладки стиль должен идти, как это,

.tabs{ 
    display:inline-block; 
    width:25%; 
    height:45px; 
    line-height:45px; 
    cursor:pointer; 
    background:#FFFFFF; 
    color:#000000; 
    font-size:19px; 
    text-align:center; 
    border:solid 1px #111111; 
    margin-right:-5px; 
    margin-bottom:-1px; 
}

Check this fiddle here

источник

2016-07-05 10:35:01

спасибо за поддержку, поскольку другой пользователь ответил сначала, я принимаю другой ответ – fresher

Отображение горизонтальных и вертикальных линий между вкладками

ответ

Смежные вопросы