jquery - 已激活菜单下方带有箭头的选项卡导航栏

Question

.tab .nav-tabs{
        border-bottom: 2px solid #ddd;
    }
    .tab .nav-tabs li{
        margin: 0 2px 0 0;
        position: relative;
    }
    .tab .nav-tabs li.active:before{
        content: "";
        position: absolute;
        bottom: -28px;
        left: 42%;
        border: 14px solid transparent;
        border-top-color: #51c2c6;
        z-index:9;
    }
    .tab .nav-tabs li.active:after{
        content: "";
        position: absolute;
        bottom: -24px;
        left: 81px;
        border: 12px solid transparent;
        /*border-top-color: #fff;*/
    }
    .tab .nav-tabs li a{
        border: none;
        padding: 20px 75px;
        font-size: 14px;
        color: #777;
        background: transparent;
        border-radius: 0;
        text-decoration: none;
    }
    /* .tab .nav-tabs li a:hover{
        color: red;
    } */
    .tab .nav-tabs li a i{
        display: block;
        text-align: center;
        margin-bottom: 5px;
    }
    .tab .nav-tabs li.active a,
    .tab .nav-tabs li.active a:focus,
    .tab .nav-tabs li.active a:hover{
        border: none;
        background: transparent;
        color: #51c2c6;
        font-weight: bold;
        text-decoration: none;
        transition: background 0.20s linear 0s;
    }
    .tab .tab-content{
        font-size: 14px;
        color: #777;
        background: #fff;
        line-height: 25px;
        padding: 10px;
    }
    .tab .tab-content h3{
        font-size: 26px;
    }
    @media only screen and (max-width: 479px) {
        .tab .nav-tabs li a{
            padding: 10px;
        }
        .tab .nav-tabs li.active:before{
            left: 28px;
            bottom: -24px;
            border-width: 12px;
        }
        .tab .nav-tabs li.active:after{
            left: 30px;
            bottom: -20px;
            border-width: 10px;
        }
    }
    span.round-tabs{
        width: 15px;
        height: 15px;
        line-height: 70px;
        display: inline-block;
        border-radius: 100px;
        background: white;
        z-index: 2;
        position: absolute;
        left: 45%;
        text-align: center;
        font-size: 25px;
        top: 89%;
    }

    span.round-tabs.one{
        border: 2px solid #ddd;
        color: #ddd;
    }

    li.active span.round-tabs.one, li.active span.round-tabs.two, li.active span.round-tabs.three, li.active span.round-tabs.four, li.active span.round-tabs.five {
        background: #f8f8f8 !important;
        border: 2px solid #f8f8f8;
        color: #fff;
    }

    span.round-tabs.two{
        border: 2px solid #ddd;
        color: #ddd;
    }

    span.round-tabs.three{
        border: 2px solid #ddd;
        color: #ddd;
    }

    .nav-tabs > li.active > a span.round-tabs{
        background: #fafafa;
    }
    a:hover,a:focus{
    text-decoration: none;
    outline: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
            <div class="tab" role="tabpanel">
            <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#Sec1" aria-controls="home" role="tab" data-toggle="tab" id="id1">Mission
                            <span class="round-tabs one"><i class="icon icon-pencil"></i></span>
                        </a>
                    </li>
                    <li role="presentation">
                        <a href="#Sec2" aria-controls="home" role="tab" data-toggle="tab" id="id2">Ethos
                            <span class="round-tabs one"><i class="icon icon-pencil"></i></span>
                        </a>
                    </li>
     
                </ul>
            </div>
        </div>

我想设计一个标签导航。它下面应该有点子弹。当我单击任何选项卡菜单时，激活的菜单下方应显示一个箭头。上图描述了我的概念。有两个选项卡可用，它应该像 col-md-6 和 col-md-6 格式一样显示在中心。

Answer 1

如果您希望 li 在较小的设备上也col-xs-6, col-sm-6 and col-md-6保持 50/50 的比例，也可以使用。或者你可以给他们width:50%（不使用引导类 col-*）

还要删除边距，否则 li 将无法并排放置（具有 width:50% ）

并且为了使跨度居中（圆形和箭头），不要使用left:42%use 代替left:50%;transform:translateX(-50%)where left:50%is 取决于父级（li）的宽度，并将translateX(-50%)跨度向左移动一半的宽度，从而完美地居中在li

请参阅下面的片段或JsFiddle

.tab .nav-tabs{
        border-bottom: 2px solid #ddd;
    }
    .tab .nav-tabs li{
        margin:0;
				text-align:center;
        position: relative;
    }
    .tab .nav-tabs li.active:before{
        content: "";
        position: absolute;
        bottom: -28px;
       left:50%;
			 transform:translateX(-50%);
        border: 14px solid transparent;
        border-top-color: #51c2c6;
        z-index:9;
    }
    .tab .nav-tabs li.active:after{
        content: "";
        position: absolute;
        bottom: -24px;
        left:50%;
			 transform:translateX(-50%);
        border: 12px solid transparent;
        /*border-top-color: #fff;*/
    }
    .tab .nav-tabs li a{
        border: none;
        padding: 20px 75px;
        font-size: 14px;
        color: #777;
        background: transparent;
        border-radius: 0;
        text-decoration: none;
    }
    /* .tab .nav-tabs li a:hover{
        color: red;
    } */
    .tab .nav-tabs li a i{
        display: block;
        text-align: center;
        margin-bottom: 5px;
    }
    .tab .nav-tabs li.active a,
    .tab .nav-tabs li.active a:focus,
    .tab .nav-tabs li.active a:hover{
        border: none;
        background: transparent;
        color: #51c2c6;
        font-weight: bold;
        text-decoration: none;
        transition: background 0.20s linear 0s;
    }
    .tab .tab-content{
        font-size: 14px;
        color: #777;
        background: #fff;
        line-height: 25px;
        padding: 10px;
    }
    .tab .tab-content h3{
        font-size: 26px;
    }
    @media only screen and (max-width: 479px) {
        .tab .nav-tabs li a{
            padding: 10px;
        }
        .tab .nav-tabs li.active:before{
            left: 28px;
            bottom: -24px;
            border-width: 12px;
        }
        .tab .nav-tabs li.active:after{
            left: 30px;
            bottom: -20px;
            border-width: 10px;
        }
    }
    span.round-tabs{
        width: 15px;
        height: 15px;
        line-height: 70px;
        display: inline-block;
        border-radius: 100px;
        background: white;
        z-index: 2;
        position: absolute;
         left:50%;
			 transform:translateX(-50%);
        text-align: center;
        font-size: 25px;
        top: 89%;
    }

    span.round-tabs.one{
        border: 2px solid #ddd;
        color: #ddd;
    }

    li.active span.round-tabs.one, li.active span.round-tabs.two, li.active span.round-tabs.three, li.active span.round-tabs.four, li.active span.round-tabs.five {
        background: #f8f8f8 !important;
        border: 2px solid #f8f8f8;
        color: #fff;
    }

    span.round-tabs.two{
        border: 2px solid #ddd;
        color: #ddd;
    }

    span.round-tabs.three{
        border: 2px solid #ddd;
        color: #ddd;
    }

    .nav-tabs > li.active > a span.round-tabs{
        background: #fafafa;
    }
    a:hover,a:focus{
    text-decoration: none;
    outline: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">
            <div class="tab" role="tabpanel">
            <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active col-md-6 col-sm-6 col-xs-6">
                        <a href="#Sec1" aria-controls="home" role="tab" data-toggle="tab" id="id1">Mission
                            <span class="round-tabs one"><i class="icon icon-pencil"></i></span>
                        </a>
                    </li>
                    <li role="presentation" class="col-md-6 col-sm-6 col-xs-6">
                        <a href="#Sec2" aria-controls="home" role="tab" data-toggle="tab" id="id2">Ethos
                            <span class="round-tabs one"><i class="icon icon-pencil"></i></span>
                        </a>
                    </li>
     
                </ul>
            </div>
        </div>