1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

No js error in console still bootstrap4 tab not working

Discussion in 'HTML & Website Design' started by sash_007, Dec 5, 2020.

0
  1. #1
    helllo friends,

    Any idea why bootstrap4 tab not working properly?
    I dont see any error in console ..
    here is my html
    <!doctype html>
<html class="no-js" lang="zxx">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Petcare | Template </title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/x-icon" href="assets/image/favicon.ico">
    <!--google fonts-->
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;700&display=swap" rel="stylesheet">
    <!-- CSS here -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/flaticon.css">
     <link rel="stylesheet" href="assets/css/slick.css">
    <link rel="stylesheet" href="assets/css/fontawesome-all.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <style>

 
/* hide content */
.content {
  display: none;
}

.content.active {
  display: block;
}
.btn-group {
    width: 100%;
}

.btn-group .btn {
    width: 50%;
}
   
    </style>
</head>

<body>
   <header class="slider_sub_page" id="home">
    

       <nav class="navbar_spa header-sticky">
         <div class="container ">
        
           <a class="float-left" href="#"><img class="logo-img" src="assets/image/logo.png" alt="petcare"></a>
             <a href="javascript:void(0);" class="icon float-right" onclick="myFunction()">
            <i class="fa fa-bars"></i>
          </a>
           <ul class="navbar_spa_nav float-right">
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="blog.html">Blog</a></li>
            <li><a href="contact.html">Contact</a></li>
           </ul>
         
         </div>
       </nav>
   
      
    <div id="mySidenav" class="sidenav">
       <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
      <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="blog.html">Blog</a></li>
            <li><a href="contact.html">Contact</a></li>
      </ul>
    
     </div>
       <div class="container">
          <div class="row slider_sub_padding">
            <div class="col-md-12 text-center">
              <h1>About Us</h1>
              <p>Lorem ipsum dolor sit amet, </p>
            </div>
          </div><!--row-->
        </div><!--container-->
    </header>
   
   <main>
    
      <!--services-->
      <div class="services mg-top-40 mg-bot-40">
        <div class="container">
          <div class="row">
             <div class="col-lg-12 col-md-12">
                <div class="difference-sub-heading text-center">
                  <h5>Our Professional Services</h5>
                  <h2>Best Spa Care Services</h2>
                </div><!--difference-sub-heading-->
             </div><!--col-lg-12-->
           </div><!--row-->
          <div class="row">
            <div class="col-lg-4 col-md-6 col-sm-6">
              <div class="single-services text-center mg-bot-40 ">
                 <div class="services-icon">
                  <i class="icon-foot-massage"></i>
                 </div><!--services-icon-->
                 <div class="services-cap">
                   <h5>Foot Message</h5>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut neque turpis. Pellentesque libero nibh, facilisis non </p>
                 </div><!--services-cap-->
              </div><!--single-services-->
             </div><!--col-lg-4-->
            
              <div class="col-lg-4 col-md-6 col-sm-6">
              <div class="single-services text-center mg-bot-40">
                 <div class="services-icon">
                  <i class="icon-mortar"></i>
                 </div><!--services-icon-->
                 <div class="services-cap">
                   <h5>Beauty Treatments</h5>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut neque turpis. Pellentesque libero nibh, facilisis non </p>
                 </div><!--services-cap-->
              </div><!--single-services-->
             </div><!--col-lg-4-->
            
              <div class="col-lg-4 col-md-6 col-sm-6">
              <div class="single-services text-center mg-bot-40">
                 <div class="services-icon">
                  <i class="icon-relax"></i>
                 </div><!--services-icon-->
                 <div class="services-cap">
                   <h5>Relaxing Massage</h5>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut neque turpis. Pellentesque libero nibh, facilisis non </p>
                 </div><!--services-cap-->
              </div><!--single-services-->
             </div><!--col-lg-4-->
            
             <div class="col-lg-4 col-md-6 col-sm-6">
              <div class="single-services text-center mg-bot-40 ">
                 <div class="services-icon">
                  <i class="icon-lotion"></i>
                 </div><!--services-icon-->
                 <div class="services-cap">
                   <h5>Lotion threapy</h5>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut neque turpis. Pellentesque libero nibh, facilisis non </p>
                 </div><!--services-cap-->
              </div><!--single-services-->
             </div><!--col-lg-4-->
            
              <div class="col-lg-4 col-md-6 col-sm-6">
              <div class="single-services text-center mg-bot-40">
                 <div class="services-icon">
                  <i class="icon-massage"></i>
                 </div><!--services-icon-->
                 <div class="services-cap">
                   <h5>Neom Treatment</h5>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut neque turpis. Pellentesque libero nibh, facilisis non </p>
                 </div><!--services-cap-->
              </div><!--single-services-->
             </div><!--col-lg-4-->
            
              <div class="col-lg-4 col-md-6 col-sm-6">
              <div class="single-services text-center mg-bot-40">
                 <div class="services-icon">
                  <i class="icon-treatment"></i>
                 </div><!--services-icon-->
                 <div class="services-cap">
                   <h5>Facials</h5>
                   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut neque turpis. Pellentesque libero nibh, facilisis non </p>
                 </div><!--services-cap-->
              </div><!--single-services-->
             </div><!--col-lg-4-->
          </div><!--row-->
        </div><!--container-->
      </div><!--services-->
    
      <!--https://www.turkishbathsharrogate.co.uk/times-and-prices-->
      <!--times & prices section-->
       <!--counter section-->
      <div class="counter mg-top-40">
       <div class="container">
         <div class="row">
             <div class="col-lg-12 col-md-12">
                <div class="time-sub-heading text-center">
                  <h5>Our Timings &amp; Rates</h5>
                  <h2>Check Out The Timings</h2>
                </div><!--time-sub-heading-->
             </div><!--col-lg-12-->
           </div><!--row-->
           <div class="row">
             <div class="col-lg-12 col-md-12">
              
                      <h2>Toggleable Tabs</h2>
                      <br>
                      <!-- Nav tabs -->
                      <ul class="nav nav-tabs">
                        <li class="nav-item">
                          <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
                        </li>
                      </ul>

                      <!-- Tab panes -->
                      <div class="tab-content">
                        <div id="home" class="container tab-pane active"><br>
                          <h3>HOME</h3>
                          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                        </div>
                        <div id="menu1" class="container tab-pane fade"><br>
                          <h3>Menu 1</h3>
                          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                        </div>
                        <div id="menu2" class="container tab-pane fade"><br>
                          <h3>Menu 2</h3>
                          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
                        </div>
                      </div>

               
             </div><!--col-lg-12-->
           </div><!--row-->
       </div><!--container-->
      </div><!--counter-->
     
      <!--call-us-->
      <div class="call-us pos-relative">
        <!--left-image-->
        <div class="abs-tbl bg-2 w-20 z--1  hidden-sm hidden-xs">
        </div>
         <!--right-image-->
        <div class="abs-tbr bg-3 w-20 z--1  hidden-sm hidden-xs">
        </div>
        <div class="container">
          <div class="row  mg-top-40">
            <div class="col-lg-12">
              <div class="call-us-title text-center">
               <h3>Any Time You can Call us</h3>
               <p>Because we know that even the best technology is only as good as the people behind it. 24/7 tech support.</p>
              </div><!--call-us-title-->
              <div class="contact-btn text-center">
               <a href="" class="btn btn-lg btn-pet">Contact us</a>
              </div><!--contact-btn-->
            </div><!--col-lg-8-->
          </div><!--row-->
        </div><!--container-->
      </div><!--call-us-->
     
    
    </main>
   
    <!--footer-->
    <footer>
     
      <div class="footer-top">
        <div class="container">
          <div class="row">
            <div class="col-lg-3 col-md-3">
               <div class="footer-contact">
                  <div class="footer-logo mg-bot-20">
                      <a href="index.html"><img src="assets/image/logo.png" alt="petcare"></a>
                   </div><!--logo-->
                  <p>
                   A109 Peter Street<br>
                   New York, NY 524011<br>
                   United States <br><br>
                   <strong>Phone: </strong><i class="fa fa-phone" aria-hidden="true"></i> +1 5688 54788 55<br>
                   <strong>Email: </strong><i class="fa fa-envelope" aria-hidden="true"></i> info@petcare.com<br>
                  </p>
               </div><!--footer-contact-->
            </div><!--col-lg-3-->
           
            <div class="col-lg-2 col-md-2 footer-links">
              <h4>Company</h4>
              <ul>
                <li><i class="fa fa-chevron-right"></i><a href="">Home</a></li>
                <li><i class="fa fa-chevron-right"></i><a href="">About Us</a></li>
                <li><i class="fa fa-chevron-right"></i><a href="">Services</a></li>
                <li><i class="fa fa-chevron-right"></i><a href="">Terms of Service</a></li>
                <li><i class="fa fa-chevron-right"></i><a href="">Privacy Policy</a></li>
              </ul>
            </div><!--footer-links-->
           
            <div class="col-lg-3 col-md-3 footer-links">
              <h4>Our Services</h4>
              <ul>
                <li><i class="fa fa-chevron-right"></i><a href="">Dog Care</a></li>
                <li><i class="fa fa-chevron-right"></i><a href="">Cat Care</a></li>
                <li><i class="fa fa-chevron-right"></i><a href="">Pet Grooming</a></li>
                <li><i class="fa fa-chevron-right"></i><a href="">Pet Infection Control</a></li>
                <li><i class="fa fa-chevron-right"></i><a href="">Doctors Note</a></li>
              </ul>
            </div><!--footer-links-->
           
            <div class="col-lg-4 col-md-4 footer-newsletter">
              <h4>Join Our Newsletter</h4>
               <p>Tamen quem nulla quae legam multos aute sint culpa legam noster magna</p>
              <form>
                <div class="input-group">
                 <input type="text" class="form-control footer-input" placeholder="Subscribe">
                 <div class="input-group-btn">
                   <button class="btn btn-pet" type="submit">Subscribe</button>
                 </div>
                </div>
              </form>
            </div><!--footer-newsletter-->
          </div><!--row-->
        </div><!--container-->
      </div><!--footer-top-->
     
      <div class="footer-lower">
        <div class="container">
        <div class="copyright float-left text-center">
          &copy; Copyright <strong><span>Petcare</span></strong>.All Rights Reserved
        </div><!--copyright-->
       
        <div class="credits float-right text-center">
          Designed By <a href="http://www.webdesigncut.com/">Webdesigncut</a>
        </div><!--credits-->
        <div class="clearfix"></div>
      </div><!--container-->
     </div><!--footer-lower-->
    </footer>
      <!--preloader-->
    <div id="preloader"></div>
    <!--back-to-top-->
    <a href="#home" class="scroll-link top-link">
      <i class="fas fa-chevron-up"></i>
    </a>

    <!-- JS here -->
   

    <!-- Jquery, Popper, Bootstrap -->
    <!--   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="./assets/js/popper.min.js"></script>
    <script src="./assets/js/bootstrap.min.js"></script> -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src = "./assets/js/jquery.waypoints.min.js"></script>
    <script src = "./assets/js/counterup.min.js"></script>
   
    <!-- Jquery Slick -->
    <script src="./assets/js/slick.min.js"></script>
    <!-- Jquery Plugins, main Jquery -->   
    <script src="./assets/js/main.js"></script>
   
    <script>
    function myFunction() {
let sidenav = document.getElementById("mySidenav");
sidenav.classList.add('show-sidebar');
}

/* Set the width of the side navigation to 0 */
function closeNav() {
    let sidenav = document.getElementById("mySidenav");
   let close = document.querySelector(".close");
  sidenav.classList.remove('show-sidebar');
}



    </script>
       
    </body>
</html>
    HTML:
    any help will be appreciated ..thanks in advance
     
    Solved! View solution.
    sash_007, Dec 5, 2020 IP
  2. sash_007

    sash_007 Well-Known Member

    Messages:
    174
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    125
    #2
    104 views and still no reply? have i asked anything wrong?
     
    sash_007, Dec 6, 2020 IP
  3. malky66

    malky66 Acclaimed Member

    Messages:
    3,996
    Likes Received:
    2,248
    Best Answers:
    88
    Trophy Points:
    515
    #3
    It's very difficult to diagnose a problem without seeing the site in question, the error could be in a JS file that we can't see.
     
    malky66, Dec 7, 2020 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Because it's the train wreck asshat nonsensical train wreck of developer ignorance, incompetence, and ineptitude that is bootcrap? More so with the equally dumbass jquery BS and use of JavaScript for things that probably shouldn't even be scripted?

    Go find a stick to scrape that idiocy off with before you go tracking it across the Internet's carpets.

    Now, that said, @malky66 has it right that it would be easier to diagnose if we had any clue what you're trying to accomplish.

    I can just say with 100% certainty that whatever it is, bootcrap is NOT the way to go about it. You're just making yourself work harder and dumber. As evidenced by the endless pointless classes for nothing, gibberish use of numbered headings, overall lack of logical document structure, and all the other "eye cans haz teh intarwebs" ignorance common to bootcrap and everything built with it.

    In fact, if you were to provide a working sample page with all the stuff you've got plugged into it, I may be willing to do a free rewrite to show you what I mean. Sadly this snippet is insufficient to that task, as is the willy-nilly nonsensical use of H1..H6 resulting in my having no clue what the proper structure should even be.
     
    Last edited: Dec 8, 2020
    deathshadow, Dec 8, 2020 IP
  5. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #5
    So putting aside @deathshadow's distaste for all things bootstrap - it's the tool you've opted to use.

    I copied your page into a codepen but because you haven't given full links to the css and javascript we can't actually test the code to see where it's breaking.

    
<script src = "./assets/js/jquery.waypoints.min.js"></script>
    <script src = "./assets/js/counterup.min.js"></script>
   
    <!-- Jquery Slick -->
    <script src="./assets/js/slick.min.js"></script>
    <!-- Jquery Plugins, main Jquery -->   
    <script src="./assets/js/main.js"></script>
    Code (markup):
    upload_2020-12-9_17-50-54.png

    If I choose Menu 1 and Menu 2 the text below does work - so I'll need you to explain what part of "working properly" isn't happening.
     
    sarahk, Dec 8, 2020 IP
  6. sash_007

    sash_007 Well-Known Member

    Messages:
    174
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    125
    #6

    thanks for reply and considering my request

    the problem is when you browse from home -> menu1-> menu2 it works but when you click home again it stays on menu2... but i dont see any error in console

    edit:i will soon post a live link..having some issues so delay
     
    sash_007, Dec 8, 2020 IP
  7. #7
    You have an ID conflict with "home" if you change "home" to something else it works i:e
    <a class="nav-link active" data-toggle="tab" href="#home2">Home</a>
    Code (markup):
    and in your "tab content":
    <div id="home2" class="container tab-pane active">
    Code (markup):
    It will work.
    The duplicate ID is in this line:
    <header class="slider_sub_page" id="home">
    Code (markup):
     
    malky66, Dec 9, 2020 IP