Bootstrap3のnavについて

Question

Bootstrap3を使用し、navで二つの項目をひとつのページに表示したいと思いました。
無事、コードはかけたもののブラウザ上で見ると下記のクラスがアクティブになっている方が、開いたときは真っ白になっており、別のタブを開いてもう一度同じタブを開くと表示されるということが起こっています。
いろいろ試してはいるのですがなかなか始めから表示させることができません。
アドバイスをいただければと思っております。
よろしくお願いします。
※コードは画像の下にあります。

<li role="presentation" class="active">

ページを開いたとき

一度ログインのタブを開いてもう一度新規会員登録に戻ったとき

<div class="top container">

            <ul class="nav nav-tabs nav-justified">
                <li role="presentation" class="active">
                    <a href="#tab1" role="tab" data-toggle="tab" aria-controls="tab" aria-expanded="true">新規会員登録</a>
                </li>
                <li role="presentation">
                    <a href="#tab2" role="tab" data-toggle="tab" aria-controls="tab" aria-expanded="false">ログイン</a>
                </li>
            </ul>
            <div role="tabpanel">
                <div id="tab-content" class="tab-content">
                    <div role="tabpanel" class="tab-pane fade" id="tab1" aria-labelledby="tab1">
                        <form class="form-signin">
                            <h2 class="form-signin-heading">新規ユーザー登録</h2>
                            <input type="text" id="inputEmail" class="form-control" placeholder="UserID" required autofocus>
                            <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
                            <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" value="remember-me"> ログイン情報を記録する（60日間）
                                </label>
                            </div>
                            <button class="btn btn-lg btn-primary btn-block" type="submit">登録</button>
                        </form>
                    </div>
                    <div role="tabpanel" class="tab-pane fade" id="tab2" aria-labelledby="tab2">
                        <form class="form-signin">
                            <h2 class="form-signin-heading">ログインして下さい</h2>
                            <input type="email" id="inputEmail" class="form-control" placeholder="Email address or User ID" required autofocus>
                            <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" value="remember-me"> ログイン情報を記録する（60日間）
                                </label>
                            </div>
                            <button class="btn btn-lg btn-primary btn-block" type="submit">ログイン</button>
                        </form>    
                    </div>
                </div>
            </div>
        </div>

Answer 1

tab1にクラス「 active in」を追加すればはじめから表示します。

<div role="tabpanel" class="tab-pane fade active in" id="tab1" aria-labelledby="tab1">

動くサンプル：https://jsfiddle.net/Lkjxvvz1/

Comments

[Maya_]

無事解決しました、ありがとうございました