简体   繁体   English

Css箭头到内容选项卡框

[英]Css arrow to content tab box

I have a easy responsive content tab. 我有一个简单的响应内容选项卡。 I want to add css arrow to the content box which should point towards the respective menu item. 我想在内容框中添加css箭头,该内容框应指向相应的菜单项。

How do I get it dynamically for each tab content boxes. 如何为每个选项卡内容框动态获取它。

Here is my code 这是我的代码

$(document).ready(function () {
    $('#verticalTab').easyResponsiveTabs({
        type: 'vertical',
        width: 'auto',
        fit: true
    });
});

DEMO DEMO

Add position: relative; 添加position: relative; to .resp-vtabs .resp-tabs-list li then add the following CSS: .resp-vtabs .resp-tabs-list li然后添加以下CSS:

.resp-vtabs .resp-tabs-list li.resp-tab-active:after {
   content: ""; 
   display: block;
   width: 0;
   height: 0;
   position: absolute;
   right: -5%;
   top: 0;
   border: 10px solid transparent;
   border-right-color: red;
}

You can change the border-right-color to change the color of the arrow. 您可以更改border-right-color以更改箭头的颜色。

http://jsbin.com/odAkAXI/4/ http://jsbin.com/odAkAXI/4/

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM