bootstrap + react.js menu

Question

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?

@fed.pavlo, I did find here http://getbootstrap.com/javascript/#tabs that people use some tab.js to do what I want. BUT where I can get that tab.js??? — 31415926, Jul 29 '14 at 10:29
@FakeRainBrigand, I'm just saying what technologies I wanna use. maybe this functionality could be easily done with react. I don't know. — 31415926, Jul 30 '14 at 08:22

score 1 · Answer 1 · answered Jul 29 '14 at 10:38

<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>

score 0 · Answer 2 · answered Jul 29 '14 at 13:08

0

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

answered Jul 29 '14 at 13:08

Anders

1,216
5
14
28

I did all that you mentioned. The problem that I want to redirect to another page and it doesn't work. Here I've made more specific post http://stackoverflow.com/questions/25014146/links-in-bootstrap-menu-doesnt-work – 31415926 Jul 30 '14 at 08:25

bootstrap + react.js menu

2 Answers2