Add JS clickable tab link functionality #1286

Reference:

Signed-off-by: John M. Horan <johnmhoran@gmail.com>

vulnerabilities/templates/vulnerability_details.html

@@ -138,7 +138,7 @@
                             {% if fixed_by_packages|length > 3 %}
                                 <tr>
                                     <td>
-                                    ... see <i>Fixed by packages</i> tab for more
+                                    See <a href="#" onclick="goToTab('fixed-by')"><i>Fixed by packages</i></a> tab for more
                                     </td>
                                 </tr>
                             {% endif %}
@@ -167,7 +167,7 @@
                             {% if affected_packages|length > 3 %}
                                 <tr>
                                     <td>
-                                ... see <i>Affected packages</i> tab for more
+                                See <a href="#" onclick="goToTab('affected-packages')"><i>Affected packages</i></a> tab for more
                                     </td>
                                 </tr>
                             {% endif %}
@@ -293,4 +293,21 @@
 
 <script src="{% static 'js/main.js' %}" crossorigin="anonymous"></script>
 
+<script>
+    function goToTab(tabName) {
+        const activeLink = document.querySelector('div.tabs.is-boxed li.is-active');
+        const activeTabContent = document.querySelector('div.tab-div.is-active');
+
+        activeLink.classList.remove('is-active');
+        activeTabContent.classList.remove('is-active');
+
+        const target_id = document.querySelector("[data-tab='" + tabName + "']");
+        const targetTabContent = document.querySelector("[data-content='" + tabName + "']");
+
+        target_id.classList.add('is-active');
+        targetTabContent.classList.add('is-active');
+    }
+</script>
+
+
 {% endblock %}