Question

我希望能够在标签之间导航。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="tab-content">
        <div id="divOne" class="tab-pane fade in active show">
            Div One Content
            <a class="nav-link" data-toggle="tab" href="#divTwo">Next</a>
        </div>

        <div id="divTwo" class="tab-pane fade">
            Div Two Content
            <a class="nav-link" data-toggle="tab" href="#divOne">Previous</a>
        </div>

    </div>

页面加载时，单击第一个“下一步”链接，它会隐藏divOne并显示divTwo。单击“上一步”时，它会隐藏divTwo并显示divOne。

但是，此后再次单击“下一步”就没有任何反应。

我不确定我是否弄乱了我的标记，还是应该使用某种jquery来执行下一个/上一个。

Answer 1

您也可以这样做

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="tab-content">
    <div id="divOne1" class="tab-pane fade show active">1st</div>
    <div id="divTwo1" class="tab-pane fade">2nd</div>
</div>
<nav>
    <div class="nav" id="navClassID">
        <a class="nav-link active" data-toggle="tab" href="#divOne1">Home</a>
        <a class="nav-link" data-toggle="tab" href="#divTwo1">Profile</a>
    </div>
</nav>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

使用选项卡创建bootstrap 4向导，但是按钮只能使用一次

1 个答案: