CODEWITHSUNDEEP
javascripthtmlcsswebtabs
Dan Sleeman
Dan Sleeman

Reputation: 23

Having trouble with html for tabs on website

I am a beginner, so appreciate the patience on this one. I am trying to embed a really simple tab structure on my website. I'm not sure why it is not working. Here is the code below.

My guess it is something to do with the JS, but again, I am only really new to this. Any help would be greatly appreciated! Thanks!

(I have used code found on CodePen for this)


<html lang="en" >
<head>

<script>$(function () {

  var activeIndex = $('.active-tab').index(),
      $contentlis = $('.tabs-content li'),
      $tabslis = $('.tabs li');
  
  // Show content of active tab on loads
  $contentlis.eq(activeIndex).show();

  $('.tabs').on('click', 'li', function (e) {
    var $current = $(e.currentTarget),
        index = $current.index();
    
    $tabslis.removeClass('active-tab');
    $current.addClass('active-tab');
    $contentlis.hide().eq(index).show();
   });
});</script>



  <meta charset="UTF-8">
  <title>CodePen - Simple tabs</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
<style>.tabs {
  margin: 20px;
  padding: 0;
  list-style: none;
  position: relative;
  border-bottom: 1px solid #ccc;
}
.tabs .active-tab {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: none;
  position: relative;
  color: black;
}
.tabs .active-tab:after {
  width: 100%;
  height: 2px;
  position: absolute;
  content: "";
  bottom: -0.1em;
  left: 0;
  background: white;
}
.tabs li {
  display: inline-block;
  cursor: pointer;
  color: #3a5ea7;
  padding: 5px 10px;
}
.tabs li:first-child {
  margin-left: 10px;
}

.tabs-content {
  margin: 20px;
  padding: 0;
  list-style: none;
}
.tabs-content li {
  display: none;
}</style>
</head>
<body>


<!-- partial:index.partial.html -->
<ul class="tabs">
  <li class="active-tab">First tab</li>
    <li>Second tab</li>
    <li>Third tab</li>
</ul>

<ul class="tabs-content">
    <li>Content of first tab</li>
  <li>Content of second tab</li>
  <li>Content of third tab</li>
</ul>
<!-- partial -->


  

</body>
</html>

Upvotes: 2

Views: 705

Answers (3)

fatemeh kazemi
fatemeh kazemi

Reputation: 611

you can use this code for creating your simple tabs

(function() {
    'use strict';
    
    var tabMenus,
            tabContents;
    tabMenus = document.querySelectorAll('.tab_menu_item_link');
    tabContents = document.querySelectorAll('.tab_content');
    
    for (var i = 0; i < tabMenus.length; i++) {
        tabMenus[i].addEventListener('click', function(e) {
            e.preventDefault();
            
            for (var i = 0; i < tabMenus.length; i++) {
                tabMenus[i].className = 'tab_menu_item_link';
            }
            this.className = 'tab_menu_item_link is-active';
            
            for (var i = 0; i < tabContents.length; i++) {
                tabContents[i].className = 'tab_content';
            }
            document.getElementById(this.dataset.id).className = 'tab_content is-active';

        });
    }
}());
body {
  font-size: 14px;
  line-height: 1.5;
  color: #333;
}
ul , li {
    padding : 0;
    margin: 0;
    list-style: none
}
a {
  text-decoration: none;
  color: #333;
}

img {
  vertical-align: bottom;
}

.clearfix {
  display: table;
  clear: both;
}

.container {
  width: 400px;
  margin: 0 auto;
  padding: 50px 0;
  background: #fff;
}

.tab_menu {
  width: 100%;
}
.tab_menu_item {
  float: left;
  margin-right: 2px;
  text-align: center;
}
.tab_menu_item:last-child {
  margin-right: 0;
}
.tab_menu_item_link {
  display: block;
  width: 100px;
  padding: 10px;
  background: #fff;
  border-radius: 5px 5px 0 0;
  border: 1px solid #888;
  border-bottom: none;
  box-sizing: border-box;
  color: #888;
  transition: 0.3s;
}
.tab_menu_item_link:hover, .tab_menu_item_link.is-active {
  background: #888;
  color: #fff;
}

.tab_container {
  border: 1px solid #888;
}

.tab_content {
  padding: 20px;
  display: none;
}
.tab_content.is-active {
  display: block;
  -webkit-animation: fade 0.5s ease;
          animation: fade 0.5s ease;
}

@-webkit-keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
 <div class="container">
    <div class="tab">
                    <ul class="tab_menu clearfix">
                        <li class="tab_menu_item"><a href="#" data-id="about" class="tab_menu_item_link is-active">About</a></li>
                        <li class="tab_menu_item"><a href="#" data-id="works" class="tab_menu_item_link">Works</a></li>
                        <li class="tab_menu_item"><a href="#" data-id="contact" class="tab_menu_item_link">Contact</a></li>
                    </ul>
                    <div class="tab_container">
                        <div class="tab_content is-active" id="about">
                            <p>some content about ...</p>
                        </div>
                        <div class="tab_content" id="works">
                            <p>some content works ...</p>
                        </div>
                        <div class="tab_content" id="contact">
                            <p>some content contact ...</p>
                        </div>
                    </div>
                </div>
    </div>

you can see this sample in my codepen: codepen.io

Upvotes: 1

Felipe Candal Campos
Felipe Candal Campos

Reputation: 173

There are lots of stuff happening there.

At first sight, you are not using JavaScript, you are using a library called JQuery, so you need to "import" it, otherwise that code won't work.

It must be placed before your JQuery code.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

I would recommend placing the code you've written at the bottom of the page, before the closing body tag

---> HERE
</body>

Improvements:

Separating your code into "modules" or smaller chunks.

  • Everything inside style tag, cut it and paste it in a new file, for example, style.css.
  • Everything inside script tag, cut it and paste it in a new file, for example, app.js.
  • After that import them, the JavaScript file, before the closing body tag, like mentioned before, and the css next to the others styles imports.

So, you'll end up with something like this:

Top of the page, inside head tag

...
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="./style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

Bottom of the page, before closing body tag

...
  <script src="./app.js"></script>
</body>

Upvotes: 1

Larry
Larry

Reputation: 102

You can check which external sources are being used (like JQuery or Bootstrap) by clicking on the settings inside a Codepen environment. This particular script use JQuery, this can be imported in your <head> with a <script> tag using the online hosted version (CDN) or manually downloading it.

You can use this for now:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Upvotes: 1

Related Questions