Set specific href for each tab

Set specific href for each tab

Hi. I want to set my href for each tab. Here's my code:
  1.  
  2. <ul class="category-account">
  3. <li class="tablinks" onclick="openTab(event, 'Home')" id="defaultOpen"><a href="#home" class="justify-content-between align-items-center d-flex"><h6><i class="fa fa-cogs" style="width: 20px;"></i>General</h6></a></li>
  4. <li class="tablinks" onclick="openTab(event, 'Logsec')"><a href="#logsec" class="justify-content-between align-items-center d-flex"><h6><i class="fa fa-shield" style="width: 20px;"></i>Login Security</h6></a></li>
  5. <li class="tablinks" onclick="openTab(event, 'Privacy')"><a href="#privacy" class="justify-content-between align-items-center d-flex"><h6><i class="fa fa-user-secret" style="width: 20px;"></i>Privacy</h6></a></li>
  6. <li class="tablinks" onclick="openTab(event, 'Notif')"><a href="#notif" class="justify-content-between align-items-center d-flex"><h6><i class="fa fa-bell-o" style="width: 20px;"></i>Notifications</h6></a></li>
  7. <li class="tablinks" onclick="openTab(event, 'Ads')"><a href="#ads" class="justify-content-between align-items-center d-flex"><h6><i class="fa fa-flag" style="width: 20px;"></i>Ads</h6></a></li>
  8. <li class="tablinks" onclick="openTab(event, 'Payment')"><a href="#payment" class="justify-content-between align-items-center d-flex"><h6><i class="fa fa-credit-card" style="width: 20px;"></i>Payment</h6></a></li>
  9. <li class="tablinks" onclick="openTab(event, 'Support')"><a href="#support" class="justify-content-between align-items-center d-flex"><h6><i class="fa fa-envelope-o" style="width: 20px;"></i>Give a Support</h6></a></li>
  10. </ul>
  11. <div id="Home" class="tabcontent" style="margin-left: 30%">
  12. <h4 class="title">Account</h4>
  13. <form class="form-area " id="myForm" action="mail.php" method="post" class="contact-form text-right">
  14. <div class="row">
  15. <div class="col-lg-8 form-group">
  16. <label>First Name</label><input disabled value="<?php echo $userRow['first_name']; ?>" class="common-input mb-20 form-control" required="" type="text">
  17. <label>Last Name</label><input disabled value="<?php echo $userRow['last_name']; ?>" class="common-input mb-20 form-control" required="" type="text">
  18. <label>Email</label><input disabled value="<?php echo $userRow['email']; ?>" class="common-input mb-20 form-control" required="" type="email">
  19. <label>Username</label><input disabled value="<?php echo $userRow['username']; ?>" class="common-input mb-20 form-control" required="" type="text">
  20. <label>Password</label><input disabled value="<?php echo $userRow['password']; ?>" class="common-input mb-20 form-control" required="" type="password">
  21. <button onclick="window.location.href = 'profile-edit.php';" class="primary-btn mt-20 text-white" style="float: right;">Save</button>
  22. <div class="mt-20 alert-msg" style="text-align: left;"></div>
  23. </div>
  24. </div>
  25. </form>
  26. </div>
  27. <div id="Logsec" class="tabcontent" style="margin-left: 30%;">
  28. <h4 class="title">Login Security</h4>
  29. <form class="form-area " id="myForm" action="mail.php" method="post" class="contact-form text-right">
  30. <div class="row">
  31. <div class="col-lg-8 form-group">
  32. <label>Two-Step Verification</label>
  33. <div class="single-widget">
  34. <i class="fa fa-phone-square"></i>
  35. </div>
  36. <label>Last Name</label>
  37. <label>Email</label>
  38. <label>Username</label>
  39. <label>Password</label>
  40. <button onclick="window.location.href = 'profile-edit.php';" class="primary-btn mt-20 text-white" style="float: right;">Save</button>
  41. <div class="mt-20 alert-msg" style="text-align: left;"></div>
  42. </div>
  43. </div>
  44. </form>
  45. </div>
  46. <script>
  47. function openTab(evt, cityName) {
  48. var i, tabcontent, tablinks;
  49. tabcontent = document.getElementsByClassName("tabcontent");
  50. for (i = 0; i < tabcontent.length; i++) {
  51. tabcontent[i].style.display = "none";
  52. }
  53. tablinks = document.getElementsByClassName("tablinks");
  54. for (i = 0; i < tablinks.length; i++) {
  55. tablinks[i].className = tablinks[i].className.replace(" active", "");
  56. }
  57. document.getElementById(cityName).style.display = "block";
  58. evt.currentTarget.className += " active";
  59. }

  61. // Get the element with id="defaultOpen" and click on it
  62. document.getElementById("defaultOpen").click();
  64. // Animate the div tabcontent
  65. $(document).ready(function(){  
  66. $('.tablinks').click(function(){ 
  67. $('.tabcontent').addClass('animated slideInRight');
  68. });
  69. });
  71. </script>