bootstrap的tab选项卡

<div class="container">
        <ul class="nav nav-tabs/nav-pills">
            <li class="active"><a href="#A" data-toggle="tab">公告a>li>
            <li><a href="#B" data-toggle="tab">规则a>li>
            <li><a href="#C" data-toggle="tab">论坛a>li>
            <li><a href="#D" data-toggle="tab">内容a>li>
        ul>
        <br />
        <div class="tab-content">
            <div class="tab-pane active" id="A">公告内容div>
            <div class="tab-pane" id="B">规则内容div>
            <div class="tab-pane" id="C">论坛内容div>
            <div class="tab-pane" id="D">内容内容div>
        div>
    div>

bootstrap的tab选项卡_第1张图片

JS触发

$(".nav-tabs.li.a").click(function(){
    $(this).tab("show/hide/toggle");
});

你可能感兴趣的:(bootstrap,html5+css3,java-web开发)