CODEWITHSUNDEEP
javascripttwitter-bootstraptwitter-bootstrap-3reactjs
Qvatra
Qvatra

Reputation: 3857

bootstrap + react.js menu

I want use react.js with bootstrap in my asp.net mvc project. I need my menu items to change "active" property when you click on corresponding <li> element

Here is what I have:

<body>
     <div class="container">

        <ul class="nav nav-tabs" role="tablist">
            <li class="active">@Html.ActionLink("Home", "Index", "Home")</li>
            <li>@Html.ActionLink("Log in", "Index", "Login")</li>
            <li>@Html.ActionLink("Predict", "Index", "Prediction")</li>
        </ul>

    </div>
</body>

Is there a build in functionality for that or I need to hardcode in javascript onClick event and change class of element to "active" by hand?

Upvotes: 1

Views: 927

Answers (2)

Anders
Anders

Reputation: 1216

You need to use the Bootstrap.js library.

It is part of the normal bootstrap.zip file. Download it here:
http://getbootstrap.com/getting-started#download
Direct: https://github.com/twbs/bootstrap/releases/download/v3.2.0/bootstrap-3.2.0-dist.zip

Then include the bootstrap.min.js in your before your tag. Also make sure to include jquery.js before, since it is a dependency

Upvotes: 0

Qvatra
Qvatra

Reputation: 3857

<ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
    <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
    <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
    <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

Upvotes: 1

Related Questions