This is a migrated thread and some comments may be shown as answers.

Tab won't change when clicked

2 Answers 189 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Bob
Top achievements
Rank 1
Bob asked on 13 May 2013, 02:37 PM
I'm hoping I have just overlooked something, but I am unable to make the tabstrip behave properly.  When you click on the tabs they don't change.  I pasted the demo (razor) code from this site directly into my view and it still won't work. The tabstrip displays properly, and I am not seeing any javascript errors. Here is the view

<div id="forecast">
    @(Html.Kendo().TabStrip()
          .Name("tabstrip")
          .Items(tabstrip =>
          {
              tabstrip.Add().Text("Paris")
                  .Selected(true)
                  .Content(@<text>
                    <div class="weather">
                        <h2>17<span>ºC</span></h2>
                        <p>Rainy weather in Paris.</p>
                    </div>
                    <span class="rainy"> </span>
                  </text>);
 
              tabstrip.Add().Text("New York")
                  .Content(@<text>
                    <div class="weather">
                        <h2>29<span>ºC</span></h2>
                        <p>Sunny weather in New York.</p>
                    </div>
                    <span class="sunny"> </span>
                  </text>);
 
              tabstrip.Add().Text("Moscow")
                  .Content(@<text>
                    <div class="weather">
                        <h2>16<span>ºC</span></h2>
                        <p>Cloudy weather in Moscow.</p>
                    </div>
                    <span class="cloudy"> </span>
                  </text>);
 
              tabstrip.Add().Text("Sydney")
                  .Content(@<text>
                    <div class="weather">
                        <h2>17<span>ºC</span></h2>
                        <p>Rainy weather in Sidney.</p>
                    </div>
                    <span class="rainy"> </span>
                  </text>);
          })
    )
</div>

And here is the upper part of the page source:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Index - TRS Portal</title>
        <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        <link href="/Content/site.css" rel="stylesheet"/>
 
        <script src="/Scripts/modernizr-2.5.3.js"></script>
 
        <link href="/Content/kendo.common.min.css" rel="stylesheet"/>
<link href="/Content/kendo.default.min.css" rel="stylesheet"/>
 
        <script src="/Scripts/jquery-1.7.1.js"></script>
 
        <script src="/Scripts/kendo.web.min.js"></script>
<script src="/Scripts/kendo.aspnetmvc.min.js"></script>

2 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 13 May 2013, 04:05 PM
Hi Bob,

Please make sure you are using a compatible version of jQuery.


Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Nicholas
Top achievements
Rank 1
answered on 26 Jun 2017, 11:21 PM
This happened to me when I had two tabstrips with the same name. Just had to give the tabstrips unique names and everything started working.
Tags
TabStrip
Asked by
Bob
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Nicholas
Top achievements
Rank 1
Share this question
or