在标签

Question

我们在site中显示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

可能会添加这样的东西吗？根据您的link）

，{#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;
}

Check this fiddle here