Question

我正在创建一个选项卡式登录页面，以便用户可以登录或单击其他选项卡以获取其他信息。这是代码：

<div class="container">
    <div class="row">
        <div class="col-sm-offset-3 col-sm-6">
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#home">Log-in</a></li>
                <li><a data-toggle="tab" href="#aboutus">What's HooHit?</a></li>
                <li><a data-toggle="tab" href="#howworks">How it works!</a></li>
                <li><a data-toggle="tab" href="#blog">Blog</a></li>
            </ul>


            <div class="tab-content">
                <div id="home" class="tab-pane fade in active">
                    <h3>HOME</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
                <div id="aboutus" class="tab-pane fade">
                    <h3>HooHit Logo</h3>
                    <p>HooHit Pets is an online community...</p>
                </div>
                <div id="howworks" class="tab-pane fade">
                    <h3>Steps picture</h3>
                    <p>You simply upload a picture or video ...</p>
                </div>
                <div id="blog" class="tab-pane fade">
                    <br />
                    <p>...</p>
                    <a href="https://blog.hoohit.com">Click here!</a>
                </div>
            </div>
        </div>
    </div>
</div>

我遇到的问题是，当我运行代码时，选项卡不起作用。因此，当我单击Blog选项卡作为示例时，浏览器上的URL更改为http://localhost:43345/Account/Login2#blog，但视图中的选项卡未更改。我可以猜测出推理（即MVC中的路由），但不确定如何解决它。有什么想法吗？

Answer 1

代码正确。您可能会在页面中缺少boostrap所需的Jquery参考。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Bootstrap的“选项卡内容”在Asp.Net MVCP中不起作用

1 个答案: