Fix nav-tab issue in design_questionpaper.html

- Fixes nav-tab active status.
- Fixes nav-tab flickering on hover over tab.

1 files changed, 23 insertions, 20 deletions

diff --git a/yaksh/templates/yaksh/design_questionpaper.html b/yaksh/templates/yaksh/design_questionpaper.html
index b9596d2..be19dbe 100644
--- a/yaksh/templates/yaksh/design_questionpaper.html
+++ b/yaksh/templates/yaksh/design_questionpaper.html
@@ -34,26 +34,27 @@ select
     {% csrf_token %}
     <input type=hidden name="is_active" id="is_active" value="{{ state }}">
 <center><b>Manual mode to design the {{lang}}  Question Paper</center><br>
-    <ul class="nav nav-tabs tabs" data-tabs="tabs">
-    <li class="active" id="fixed-tab">
-        <a href="#fixed-questions" role="tab" data-toggle="tab" id="fixed">
-            STEP 1<br>
-            Add Fixed Questions
-        </a>
-    </li>
-    <li id="random-tab">
-        <a href="#random-questions" role="tab" data-toggle="tab" id="random">
-            STEP 2<br>
-            Add Random Questions
-        </a>
-    </li>
-    <li id="finish-tab">
-    <a href="#finish" role="tab" data-toggle="tab" id="finished">
-        STEP 3<br>
-        Finish
-    </a></li>
-</ul>
-
+    <div class = "tab-base">
+        <ul class="nav nav-tabs tabs" role="tablist" data-tabs="tabs" id = "ulTab">
+        <li class="active" id="fixed-tab">
+            <a data-toggle="tab" href="#fixed-questions" class = "nav-link" id="fixed">
+                STEP 1<br>
+                Add Fixed Questions
+            </a>
+        </li>
+        <li id="random-tab">
+            <a data-toggle="tab" href="#random-questions" class = "nav-link" id="random">
+                STEP 2<br>
+                Add Random Questions
+            </a>
+        </li>
+        <li id="finish-tab">
+        <a data-toggle="tab" href="#finish" class = "nav-link" id="finished">
+            STEP 3<br>
+            Finish
+        </a></li>
+    </ul>
+    </div>
     <div>
         <h3>Total Marks:  <span id="total_marks" class="well"> {{ qpaper.total_marks }} </span></h3>
     </div>
@@ -250,6 +251,8 @@ select
             $('#fixed').tab('show');
         {% elif state == "random" %}
             $("#random").tab('show');
+            $('li').removeClass('active');
+            $(this).addClass('active');
         {% elif state == "finish" %}
             $('#finished').tab('show');
         {% endif %}