Skip to content

Commit ecee1e4

Browse files
marabooymarabooy
authored
Update and fix tab behavior on tab navigation. (#382)
1 parent 48d0efa commit ecee1e4

File tree

2 files changed

+251
-274
lines changed

2 files changed

+251
-274
lines changed

‎pages/getting-started/understand-odata-in-6-steps.html

+25-61
Original file line numberDiff line numberDiff line change
@@ -484,17 +484,11 @@ <h3 class="top-margin bottom-margin">Step 1: Requesting resources
484484
<div class="code-row bottom-margin">
485485
<ul class="nav nav-tabs" role="tablist">
486486
<li role="presentation" class="active"><a class="tab-link" href="#http1" role="tab" aria-controls="http1" data-toggle="tab">HTTP request</a></li>
487-
<li role="presentation" class="dropdown">
488-
<a class="tab-link dropdown-toggle" href="#csharp1" role="tab" id="csharpDrop1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-controls="csharpDrop1-contents">C# &nbsp;<span
489-
class="caret"></span></a></p>
490-
<ul role="presentation" class="dropdown-menu tab-link" id="csharpDrop1-contents">
491-
<li><a class="tab-link" href="#csharpCodeGen1" role="tab" id="csharpCodeGen1-tab" data-toggle="tab" aria-controls="csharpCodeGen1">OData v4 Client Code Generator</a></li>
492-
<li><a class="tab-link" href="#csharpSimpleOData1" role="tab" id="csharpSimpleOData1-tab" data-toggle="tab" aria-controls="csharpSimpleOData1">Simple.OData.Client</a></li>
493-
</ul>
494-
</li>
487+
<li role="presentation"><a class="tab-link" href="#csharpCodeGen1" role="tab" id="csharpCodeGen1-tab" data-toggle="tab" aria-controls="csharpCodeGen1">C# OData v4 Client Code Generator</a></li>
488+
<li role="presentation"><a class="tab-link" href="#csharpSimpleOData1" role="tab" id="csharpSimpleOData1-tab" data-toggle="tab" aria-controls="csharpSimpleOData1">C# Simple.OData.Client</a></li>
495489
<li role="presentation"><a class="tab-link" href="#olingo-js-1" role="tab" aria-controls="olingo-js-1" data-toggle="tab">Olingo JavaScript client</a></li>
496490
<li role="presentation"><a class="tab-link" href="#odatacpp-1" role="tab" aria-controls="odatacpp-1" data-toggle="tab">C++</a></li>
497-
<li role="presentation"><a class="tab-link" href="#nodejs-1" role="tab" aria-controls="nodejs-1" data-toggle="tab">Node.js</a></li>
491+
<li role="presentation"><a class="tab-link" href="#nodejs-1" role="tab" aria-controls="nodejs-1" data-toggle="tab" >Node.js</a></li>
498492
<li role="presentation"><a class="tab-link" href="#contribute-1" role="tab" aria-controls="contribute-1" data-toggle="tab">Contribute</a></li>
499493
</ul>
500494
<div class="tab-content">
@@ -506,14 +500,14 @@ <h3 class="top-margin bottom-margin">Step 1: Requesting resources
506500
{% endhighlight %}
507501
<button class="btn btn-primary step-buttons" data-toggle="modal" data-target="#step-collection-modal">View the response</button>
508502
</div>
509-
<div role="tabpanel" class="tab-pane fade" id="csharpCodeGen1" aria-labelledby="csharpCodeGen1-tab">
503+
<div role="tabpanel" class="tab-pane" id="csharpCodeGen1">
510504
{% highlight csharp %}
511505
var context = new DefaultContainer(new Uri("https://services.odata.org/v4/TripPinServiceRW/"));
512506
var people = context.People.Execute();
513507
{% endhighlight %}
514508
The client library used is the <a href="https://visualstudiogallery.msdn.microsoft.com/9b786c0e-79d1-4a50-89a5-125e57475937">OData v4 Client Code Generator</a>.
515509
</div>
516-
<div role="tabpanel" class="tab-pane fade" id="csharpSimpleOData1" aria-labelledby="csharpSimpleOData1-tab">
510+
<div role="tabpanel" class="tab-pane" id="csharpSimpleOData1">
517511
<b>Typed syntax</b>
518512
{% highlight csharp %}
519513
var client = new ODataClient("https://services.odata.org/v4/TripPinServiceRW/");
@@ -592,14 +586,8 @@ <h3 class="top-margin bottom-margin">Step 2: Requesting an individual resource
592586
<div class="code-row bottom-margin">
593587
<ul class="nav nav-tabs" role="tablist">
594588
<li role="presentation" class="active"><a class="tab-link" href="#http2" role="tab" aria-controls="http2" data-toggle="tab">HTTP request</a></li>
595-
<li role="presentation" class="dropdown">
596-
<a class="tab-link dropdown-toggle" href="#csharp2" role="tab" id="csharpDrop2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-controls="csharpDrop2-contents">C# &nbsp;<span
597-
class="caret"></span></a></p>
598-
<ul role="presentation" class="dropdown-menu tab-link" id="csharpDrop2-contents">
599-
<li><a class="tab-link" href="#csharpCodeGen2" role="tab" id="csharpCodeGen2-tab" data-toggle="tab" aria-controls="csharpCodeGen2">OData v4 Client Code Generator</a></li>
600-
<li><a class="tab-link" href="#csharpSimpleOData2" role="tab" id="csharpSimpleOData2-tab" data-toggle="tab" aria-controls="csharpSimpleOData2">Simple.OData.Client</a></li>
601-
</ul>
602-
</li>
589+
<li role="presentation" ><a class="tab-link" href="#csharpCodeGen2" role="tab" id="csharpCodeGen2-tab" data-toggle="tab" aria-controls="csharpCodeGen2">C# OData v4 Client Code Generator</a></li>
590+
<li role="presentation" ><a class="tab-link" href="#csharpSimpleOData2" role="tab" id="csharpSimpleOData2-tab" data-toggle="tab" aria-controls="csharpSimpleOData2">C# Simple.OData.Client</a></li>
603591
<li role="presentation"><a class="tab-link" href="#olingo-js-2" role="tab" aria-controls="olingo-js-2" data-toggle="tab">Olingo JavaScript client</a></li>
604592
<li role="presentation"><a class="tab-link" href="#odatacpp-2" role="tab" aria-controls="odatacpp-2" data-toggle="tab">C++</a></li>
605593
<li role="presentation"><a class="tab-link" href="#nodejs-2" role="tab" aria-controls="nodejs-2" data-toggle="tab">Node.js</a></li>
@@ -614,14 +602,14 @@ <h3 class="top-margin bottom-margin">Step 2: Requesting an individual resource
614602
{% endhighlight %}
615603
<button class="btn btn-primary step-buttons" data-toggle="modal" data-target="#step-individual-modal">View the response</button>
616604
</div>
617-
<div role="tabpanel" class="tab-pane fade" id="csharpCodeGen2" aria-labelledby="csharpCodeGen2-tab">
605+
<div role="tabpanel" class="tab-pane" id="csharpCodeGen2">
618606
{% highlight csharp %}
619607
var context = new DefaultContainer(new Uri("https://services.odata.org/v4/(S(34wtn2c0hkuk5ekg0pjr513b))/TripPinServiceRW/"));
620608
var person = context.People.ByKey(userName: "russellwhyte").GetValue();
621609
{% endhighlight %}
622610
The client library used is the <a href="https://visualstudiogallery.msdn.microsoft.com/9b786c0e-79d1-4a50-89a5-125e57475937">OData v4 Client Code Generator</a>.
623611
</div>
624-
<div role="tabpanel" class="tab-pane fade" id="csharpSimpleOData2" aria-labelledby="csharpSimpleOData2-tab">
612+
<div role="tabpanel" class="tab-pane" id="csharpSimpleOData2" aria-labelledby="csharpSimpleOData2-tab">
625613
<b>Typed syntax</b>
626614
{% highlight csharp %}
627615
var client = new ODataClient("https://services.odata.org/v4/TripPinServiceRW/");
@@ -701,14 +689,8 @@ <h3 class="top-margin bottom-margin">Step 3: Queries
701689
<div class="code-row bottom-margin">
702690
<ul class="nav nav-tabs" role="tablist">
703691
<li role="presentation" class="active"><a class="tab-link" href="#http3" role="tab" aria-controls="http3" data-toggle="tab">HTTP request</a></li>
704-
<li role="presentation" class="dropdown">
705-
<a class="tab-link dropdown-toggle" href="#csharp3" role="tab" id="csharpDrop3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-controls="csharpDrop3-contents">C#
706-
&nbsp;<span class="caret"></span></a></p>
707-
<ul role="presentation" class="dropdown-menu tab-link" id="csharpDrop3-contents">
708-
<li><a class="tab-link" href="#csharpCodeGen3" role="tab" id="csharpCodeGen3-tab" data-toggle="tab" aria-controls="csharpCodeGen3">OData v4 Client Code Generator</a></li>
709-
<li><a class="tab-link" href="#csharpSimpleOData3" role="tab" id="csharpSimpleOData3-tab" data-toggle="tab" aria-controls="csharpSimpleOData3">Simple.OData.Client</a></li>
710-
</ul>
711-
</li>
692+
<li role="presentation"><a class="tab-link" href="#csharpCodeGen3" role="tab" id="csharpCodeGen3-tab" data-toggle="tab" aria-controls="csharpCodeGen3">C# OData v4 Client Code Generator</a></li>
693+
<li role="presentation"><a class="tab-link" href="#csharpSimpleOData3" role="tab" id="csharpSimpleOData3-tab" data-toggle="tab" aria-controls="csharpSimpleOData3">C# Simple.OData.Client</a></li>
712694
<li role="presentation"><a class="tab-link" href="#olingo-js-3" role="tab" aria-controls="olingo-js-3" data-toggle="tab">Olingo JavaScript client</a></li>
713695
<li role="presentation"><a class="tab-link" href="#odatacpp-3" role="tab" aria-controls="odatacpp-3" data-toggle="tab">C++</a></li>
714696
<li role="presentation"><a class="tab-link" href="#nodejs-3" role="tab" aria-controls="nodejs-3" data-toggle="tab">Node.js</a></li>
@@ -723,14 +705,14 @@ <h3 class="top-margin bottom-margin">Step 3: Queries
723705
{% endhighlight %}
724706
<button class="btn btn-primary step-buttons" data-toggle="modal" data-target="#step-query-modal">View the response</button>
725707
</div>
726-
<div role="tabpanel" class="tab-pane fade" id="csharpCodeGen3" aria-labelledby="csharpCodeGen3-tab">
708+
<div role="tabpanel" class="tab-pane" id="csharpCodeGen3" aria-labelledby="csharpCodeGen3-tab">
727709
{% highlight csharp %}
728710
var context = new DefaultContainer(new Uri("https://services.odata.org/v4/(S(34wtn2c0hkuk5ekg0pjr513b))/TripPinServiceRW/"));
729711
var people = context.People.Where(c => c.Trips.Any(d => d.Budget > 3000)).Take(2).Select(c => new {c.FirstName, c.LastName});
730712
{% endhighlight %}
731713
The client library used is the <a href="https://visualstudiogallery.msdn.microsoft.com/9b786c0e-79d1-4a50-89a5-125e57475937">OData v4 Client Code Generator</a>.
732714
</div>
733-
<div role="tabpanel" class="tab-pane fade" id="csharpSimpleOData3" aria-labelledby="csharpSimpleOData3-tab">
715+
<div role="tabpanel" class="tab-pane" id="csharpSimpleOData3" aria-labelledby="csharpSimpleOData3-tab">
734716
<b>Typed syntax</b>
735717
{% highlight csharp %}
736718
var client = new ODataClient("https://services.odata.org/v4/TripPinServiceRW/");
@@ -819,14 +801,8 @@ <h3 class="top-margin bottom-margin">Step 4: Creating a new resource
819801
<div class="code-row bottom-margin">
820802
<ul class="nav nav-tabs" role="tablist">
821803
<li role="presentation" class="active"><a class="tab-link" href="#http4" role="tab" aria-controls="http4" data-toggle="tab">HTTP request</a></li>
822-
<li role="presentation" class="dropdown">
823-
<a class="tab-link dropdown-toggle" href="#csharp4" role="tab" id="csharpDrop4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-controls="csharpDrop4-contents">C# &nbsp;<span
824-
class="caret"></span></a></p>
825-
<ul role="presentation" class="dropdown-menu tab-link" id="csharpDrop4-contents">
826-
<li><a class="tab-link" href="#csharpCodeGen4" role="tab" id="csharpCodeGen4-tab" data-toggle="tab" aria-controls="csharpCodeGen4">OData v4 Client Code Generator</a></li>
827-
<li><a class="tab-link" href="#csharpSimpleOData4" role="tab" id="csharpSimpleOData4-tab" data-toggle="tab" aria-controls="csharpSimpleOData4">Simple.OData.Client</a></li>
828-
</ul>
829-
</li>
804+
<li role="presentation"><a class="tab-link" href="#csharpCodeGen4" role="tab" id="csharpCodeGen4-tab" data-toggle="tab" aria-controls="csharpCodeGen4">C# OData v4 Client Code Generator</a></li>
805+
<li role="presentation"><a class="tab-link" href="#csharpSimpleOData4" role="tab" id="csharpSimpleOData4-tab" data-toggle="tab" aria-controls="csharpSimpleOData4">C# Simple.OData.Client</a></li>
830806
<li role="presentation"><a class="tab-link" href="#olingo-js-4" role="tab" aria-controls="olingo-js-4" data-toggle="tab">Olingo JavaScript client</a></li>
831807
<li role="presentation"><a class="tab-link" href="#odatacpp-4" role="tab" aria-controls="odatacpp-4" data-toggle="tab">C++</a></li>
832808
<li role="presentation"><a class="tab-link" href="#nodejs-4" role="tab" aria-controls="nodejs-4" data-toggle="tab">Node.js</a></li>
@@ -863,7 +839,7 @@ <h3 class="top-margin bottom-margin">Step 4: Creating a new resource
863839
{% endhighlight %}
864840
<button class="btn btn-primary step-buttons" data-toggle="modal" data-target="#step-post-modal">View the response</button>
865841
</div>
866-
<div role="tabpanel" class="tab-pane fade" id="csharpCodeGen4" aria-labelledby="csharpCodeGen4-tab">
842+
<div role="tabpanel" class="tab-pane" id="csharpCodeGen4" aria-labelledby="csharpCodeGen4-tab">
867843
{% highlight csharp %}
868844
var context = new DefaultContainer(new Uri("https://services.odata.org/v4/(S(34wtn2c0hkuk5ekg0pjr513b))/TripPinServiceRW/"));
869845
var lewis = new Person()
@@ -889,7 +865,7 @@ <h3 class="top-margin bottom-margin">Step 4: Creating a new resource
889865
{% endhighlight %}
890866
The client library used is the <a href="https://visualstudiogallery.msdn.microsoft.com/9b786c0e-79d1-4a50-89a5-125e57475937">OData v4 Client Code Generator</a>.
891867
</div>
892-
<div role="tabpanel" class="tab-pane fade" id="csharpSimpleOData4" aria-labelledby="csharpSimpleOData4-tab">
868+
<div role="tabpanel" class="tab-pane" id="csharpSimpleOData4" aria-labelledby="csharpSimpleOData4-tab">
893869
<b>Typed syntax</b>
894870
{% highlight csharp %}
895871
var client = new ODataClient("https://services.odata.org/v4/TripPinServiceRW/");
@@ -1083,14 +1059,8 @@ <h3 class="top-margin bottom-margin">Step 5: Relating resources
10831059
<div class="code-row bottom-margin">
10841060
<ul class="nav nav-tabs" role="tablist">
10851061
<li role="presentation" class="active"><a class="tab-link" href="#http5" role="tab" aria-controls="http5" data-toggle="tab">HTTP request</a></li>
1086-
<li role="presentation" class="dropdown">
1087-
<a class="tab-link dropdown-toggle" href="#csharp5" role="tab" id="csharpDrop5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-controls="csharpDrop5-contents">C# &nbsp;<span
1088-
class="caret"></span></a></p>
1089-
<ul role="presentation" class="dropdown-menu tab-link" id="csharpDrop5-contents">
1090-
<li><a class="tab-link" href="#csharpCodeGen5" role="tab" id="csharpCodeGen5-tab" data-toggle="tab" aria-controls="csharpCodeGen5">OData v4 Client Code Generator</a></li>
1091-
<li><a class="tab-link" href="#csharpSimpleOData5" role="tab" id="csharpSimpleOData5-tab" data-toggle="tab" aria-controls="csharpSimpleOData5">Simple.OData.Client</a></li>
1092-
</ul>
1093-
</li>
1062+
<li role="presentation"><a class="tab-link" href="#csharpCodeGen5" role="tab" id="csharpCodeGen5-tab" data-toggle="tab" aria-controls="csharpCodeGen5">C# OData v4 Client Code Generator</a></li>
1063+
<li role="presentation"><a class="tab-link" href="#csharpSimpleOData5" role="tab" id="csharpSimpleOData5-tab" data-toggle="tab" aria-controls="csharpSimpleOData5">C# Simple.OData.Client</a></li>
10941064
<li role="presentation"><a class="tab-link" href="#olingo-js-5" role="tab" aria-controls="olingo-js-5" data-toggle="tab">Olingo JavaScript client</a></li>
10951065
<li role="presentation"><a class="tab-link" href="#odatacpp-5" role="tab" aria-controls="odatacpp-5" data-toggle="tab">C++</a></li>
10961066
<li role="presentation"><a class="tab-link" href="#nodejs-5" role="tab" aria-controls="nodejs-5" data-toggle="tab">Node.js</a></li>
@@ -1110,7 +1080,7 @@ <h3 class="top-margin bottom-margin">Step 5: Relating resources
11101080
{% endhighlight %}
11111081
<button class="btn btn-primary step-buttons" data-toggle="modal" data-target="#step-relationship-modal">View the response</button>
11121082
</div>
1113-
<div role="tabpanel" class="tab-pane fade" id="csharpCodeGen5" aria-labelledby="csharpCodeGen5-tab">
1083+
<div role="tabpanel" class="tab-pane" id="csharpCodeGen5">
11141084
{% highlight csharp %}
11151085
var context = new DefaultContainer(new Uri("https://services.odata.org/v4/(S(34wtn2c0hkuk5ekg0pjr513b))/TripPinServiceRW/"));
11161086
var trip = context.People.ByKey(userName: "russellwhyte").Trips.ByKey(tripId: 0).GetValue();
@@ -1123,7 +1093,7 @@ <h3 class="top-margin bottom-margin">Step 5: Relating resources
11231093
{% endhighlight %}
11241094
The client library used is the <a href="https://visualstudiogallery.msdn.microsoft.com/9b786c0e-79d1-4a50-89a5-125e57475937">OData v4 Client Code Generator</a>.
11251095
</div>
1126-
<div role="tabpanel" class="tab-pane fade" id="csharpSimpleOData5" aria-labelledby="csharpSimpleOData5-tab">
1096+
<div role="tabpanel" class="tab-pane" id="csharpSimpleOData5">
11271097
<b>Typed syntax</b>
11281098
{% highlight csharp %}
11291099
var client = new ODataClient("https://services.odata.org/v4/TripPinServiceRW/");
@@ -1252,14 +1222,8 @@ <h3 class="top-margin bottom-margin">Step 6: Invoking a function
12521222
<div class="code-row bottom-margin">
12531223
<ul class="nav nav-tabs" role="tablist">
12541224
<li role="presentation" class="active"><a class="tab-link" href="#http6" role="tab" aria-controls="http6" data-toggle="tab">HTTP request</a></li>
1255-
<li role="presentation" class="dropdown">
1256-
<a class="tab-link dropdown-toggle" href="#csharp6" role="tab" id="csharpDrop6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-controls="csharpDrop1-contents">C# &nbsp;<span
1257-
class="caret"></span></a></p>
1258-
<ul role="presentation" class="dropdown-menu tab-link" id="csharpDrop6-contents">
1259-
<li><a class="tab-link" href="#csharpCodeGen6" role="tab" id="csharpCodeGen6-tab" data-toggle="tab" aria-controls="csharpCodeGen6">OData v4 Client Code Generator</a></li>
1260-
<li><a class="tab-link" href="#csharpSimpleOData6" role="tab" id="csharpSimpleOData6-tab" data-toggle="tab" aria-controls="csharpSimpleOData6">Simple.OData.Client</a></li>
1261-
</ul>
1262-
</li>
1225+
<li role="presentation"><a class="tab-link" href="#csharpCodeGen6" role="tab" id="csharpCodeGen6-tab" data-toggle="tab" aria-controls="csharpCodeGen6">OData v4 Client Code Generator</a></li>
1226+
<li role="presentation"><a class="tab-link" href="#csharpSimpleOData6" role="tab" id="csharpSimpleOData6-tab" data-toggle="tab" aria-controls="csharpSimpleOData6">Simple.OData.Client</a></li>
12631227
<li role="presentation"><a class="tab-link" href="#olingo-js-6" role="tab" aria-controls="olingo-js-6" data-toggle="tab">Olingo JavaScript client</a></li>
12641228
<li role="presentation"><a class="tab-link" href="#odatacpp-6" role="tab" aria-controls="odatacpp-6" data-toggle="tab">C++</a></li>
12651229
<li role="presentation"><a class="tab-link" href="#nodejs-6" role="tab" aria-controls="nodejs-6" data-toggle="tab">Node.js</a></li>
@@ -1275,7 +1239,7 @@ <h3 class="top-margin bottom-margin">Step 6: Invoking a function
12751239
{% endhighlight %}
12761240
<button class="btn btn-primary step-buttons" data-toggle="modal" data-target="#step-function-modal">View the response</button>
12771241
</div>
1278-
<div role="tabpanel" class="tab-pane fade" id="csharpCodeGen6" aria-labelledby="csharpCodeGen6-tab">
1242+
<div role="tabpanel" class="tab-pane" id="csharpCodeGen6" aria-labelledby="csharpCodeGen6-tab">
12791243
{% highlight csharp %}
12801244
var context = new DefaultContainer(new
12811245
Uri("https://services.odata.org/v4/(S(34wtn2c0hkuk5ekg0pjr513b))/TripPinServiceRW/"));
@@ -1284,7 +1248,7 @@ <h3 class="top-margin bottom-margin">Step 6: Invoking a function
12841248
{% endhighlight %}
12851249
The client library used is the <a href="https://visualstudiogallery.msdn.microsoft.com/9b786c0e-79d1-4a50-89a5-125e57475937">OData v4 Client Code Generator</a>.
12861250
</div>
1287-
<div role="tabpanel" class="tab-pane fade" id="csharpSimpleOData6" aria-labelledby="csharpSimpleOData6-tab">
1251+
<div role="tabpanel" class="tab-pane" id="csharpSimpleOData6" aria-labelledby="csharpSimpleOData6-tab">
12881252
<b>Typed syntax</b>
12891253
{% highlight csharp %}
12901254
var client = new ODataClient("https://services.odata.org/v4/TripPinServiceRW/");

0 commit comments

Comments
 (0)