在標簽之間顯示水平和垂直線

Question

我們在網站中顯示4個標簽，如下圖所示。

我們要在每個標簽之間顯示水平線和垂直線，如下圖所示。

 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; 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');?> </div> </div> </div> <div id="tab-3" class="tab-text"> INSERT THIRD TAB CONTENT HERE </div> <div id="tab-4" class="tab-text"> INSERT FOURTH TAB CONTENT HERE </div> </div> 

這是magento電子商務網站。

請幫助我找到解決方案。

提前致謝。

Answer 1

添加這樣的東西也許？ （ #636363根據您的鏈接似乎是正確的顏色）

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

Answer 2

您的標簽頁樣式應如下所示：

.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;
}

在這里檢查這個小提琴