ASP.NET MVC / TabStrip - Doesnt switch Tabs

Question

1) included the following in bundle.config

/Content/kendo/kendo.common.min.css
/Scripts/modernizr-2.5.3.js 
/Scripts/jquery-1.7.1.js    
/Scripts/kendo/kendo.all.min.js
/Scripts/kendo/kendo.aspnetmvc.min.js   
/Content/kendo/kendo.common.min.css 
/Content/kendo/kendo.metro.min.css   
2) web.config 

      <namespaces>
            <add namespace="System.Web.Mvc" />
            <add namespace="System.Web.Mvc.Ajax" />
            <add namespace="System.Web.Mvc.Html" />
            <add namespace="System.Web.Optimization"/>
            <add namespace="System.Web.Routing" />
            <add namespace="Kendo.Mvc.UI" />
          </namespaces>

    3) .cshtml
    @using Kendo.Mvc.UI 
    <script>

        var onActivate = function (e) {
            // access the activated item via e.item (Element)

            // detach activate event handler via unbind()
            tabStrip.unbind("activate", onActivate);
        };
    </script>
    <div id="forecast">
        @(Html.Kendo().TabStrip()
              .Name("tabstrip")
              .Events(events => events
                .Select("onSelect")
                .Activate("onActivate")
                .ContentLoad("onContentLoad")
                .Error("onError")
             )
              .Items(tabstrip =>
              {
                  tabstrip.Add().Text("Paris")
                      .Selected(true)
                      .Content(@<text>
                        <div class="weather">
                            <h2>17<span>&ordm;C</span></h2>
                            <p>Rainy weather in Paris.</p>
                        </div>
                        <span class="rainy">&nbsp;</span>
                      </text>);

                  tabstrip.Add().Text("New York")
                        .Content(Html.Action("HandleTabStrip","Home").ToString()
                  );

                  tabstrip.Add().Text("Moscow")
                      .Content(@<text>
                        @Html.Action("HandleTabStrip", "Home")
                   </text>);

                  tabstrip.Add().Text("Sydney")
                      .Content(@<text>
                        <div class="weather">
                            <h2>17<span>&ordm;C</span></h2>
                            <p>Rainy weather in Sidney.</p>
                        </div>
                        <span class="rainy">&nbsp;</span>
                      </text>);
              })
        )
    </div>

HomeController 
----------------

  public ActionResult HandleTabStrip()
        {
            return View();
        }

The problem is the tabs dont switch. No JS errors. it just changes url doing nothing http://:55985/Home/AjaxBoundTabView#tabstrip-2 I have spent close to 2 weeks without any clue. I just followed the steps specified in the documentation but it doesnt work

Answer 1

Try changing the jQuery version. 1.7.1 is quite an old one and your Kendo UI version may not support it.