最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Bootstrap tabs not working the first time - Stack Overflow

programmeradmin3浏览0评论

I am trying to implement two basic tabs and panels. The panel does not show the content(Page 1) on page load. However, clicking on the other tab works fine with the right content(Page 2) and then going back to the first tab works fine(Page 1).

<ul class="nav nav-tabs">
    <li class="active"><a href="#panel1" data-toggle="tab">Page 1</a></li>
    <li><a href="#panel2" data-toggle="tab">Page 2</a></li>
</ul>

<div class="tab-content">
    <div id="panel1" class="tab-pane">
        Page 1
    </div>
    <div id="panel2" class="tab-pane">
        Page 2
    </div>
</div>

Is there something I am missing?

I am trying to implement two basic tabs and panels. The panel does not show the content(Page 1) on page load. However, clicking on the other tab works fine with the right content(Page 2) and then going back to the first tab works fine(Page 1).

<ul class="nav nav-tabs">
    <li class="active"><a href="#panel1" data-toggle="tab">Page 1</a></li>
    <li><a href="#panel2" data-toggle="tab">Page 2</a></li>
</ul>

<div class="tab-content">
    <div id="panel1" class="tab-pane">
        Page 1
    </div>
    <div id="panel2" class="tab-pane">
        Page 2
    </div>
</div>

Is there something I am missing?

Share Improve this question asked Apr 30, 2018 at 18:43 TheFallenOneTheFallenOne 1,6862 gold badges26 silver badges64 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 6

You don't have the active class for the content panel. You need the following to show the panel1 content by default:

<div id="panel1" class="tab-pane show active">...

I think we need more details because your code is working fine

<link rel="stylesheet" href="https://stackpath.bootstrapcdn./bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery./jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn./bootstrap/4.1.1/js/bootstrap.min.js"></script>

<ul class="nav nav-tabs">
    <li class="active"><a href="#panel1" data-toggle="tab">Page 1</a></li>
    <li><a href="#panel2" data-toggle="tab">Page 2</a></li>
</ul>

<div class="tab-content">
    <div id="panel1" class="tab-pane show active">
       This is the content of page1............................
    </div>
    <div id="panel2" class="tab-pane">
       This is the content of page2............................
    </div>
</div>

发布评论

评论列表(0)

  1. 暂无评论