Format tabs from an HTML menu

Question

I created a tab but I would like to make a few minor changes that I cannot.

I would like to replace this area for example with circles instead of text:

How can I do it?

$(document).ready(function() {

  //Default Action
  $(".tab_content").hide(); //Hide all content
  $("ul.tabs li:first").addClass("active").show(); //Activate first tab
  $(".tab_content:first").show(); //Show first tab content

  //On Click Event
  $("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".tab_content").hide(); //Hide all tab content
    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active content
    return false;
  });

});

.container {
  width: 500px;
  margin: 10px auto;
}
ul.tabs {
  margin: 0;
  padding: 0;
  float: left;
  list-style: none;
  height: 32px;
  border-bottom: 1px solid #999;
  border-left: 1px solid #999;
  width: 100%;
}
ul.tabs li {
  float: left;
  margin: 0;
  padding: 0;
  height: 31px;
  line-height: 31px;
  border: 1px solid #999;
  border-left: none;
  margin-bottom: -1px;
  background: #F0F0F0;
  overflow: hidden;
  position: relative;
}
ul.tabs li a {
  text-decoration: none;
  color: #000;
  display: block;
  font-size: 1.2em;
  padding: 0 20px;
  border: 1px solid #fff;
  outline: none;
}
ul.tabs li a:hover {
  background: #ccc;
}
html ul.tabs li.active,
html ul.tabs li.active a:hover {
  background: #fff;
  border-bottom: 1px solid #fff;
}
.tab_container {
  border: 1px solid #999;
  border-top: none;
  clear: both;
  float: left;
  width: 100%;
  background: #fff;
  -moz-border-radius-bottomright: 5px;
  -khtml-border-radius-bottomright: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-bottomleft: 5px;
  -khtml-border-radius-bottomleft: 5px;
  -webkit-border-bottom-left-radius: 5px;
}
.tab_content {
  padding: 20px;
  font-size: 1.2em;
}
.tab_content h2 {
  font-weight: normal;
  padding-bottom: 10px;
  border-bottom: 1px dashed #ddd;
  font-size: 1.8em;
}
.tab_content h3 a {
  color: #254588;
}
.tab_content img {
  float: left;
  margin: 0 20px 20px 0;
  border: 1px solid #ddd;
  padding: 5px;
}

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

<div class="container">
  <h1>teste</h1>
  <ul class="tabs">
    <li><a href="#tab1">Heading 1</a>
    </li>
    <li><a href="#tab2">Heading 2</a>
    </li>
    <li><a href="#tab3">Heading 3</a>
    </li>
    <li><a href="#tab4">Heading 4</a>
    </li>
    <li><a href="#tab5">Heading 5</a>
    </li>
  </ul>
  <div class="tab_container">
    <div id="tab1" class="tab_content">
      <h2>Heading 1</h2>
      <p>Content 1</p>
    </div>
    <div id="tab2" class="tab_content">
      <h2>Heading 2</h2>
      <p>Content 2</p>
    </div>
    <div id="tab3" class="tab_content">
      <h2>Heading 3</h2>
      <p>Content 3</p>
    </div>
    <div id="tab4" class="tab_content">
      <h2>Heading 4</h2>
      <p>Content 4</p>
    </div>
    <div id="tab5" class="tab_content">
      <h2>Heading 5</h2>
      <p>Content 5</p>
    </div>
  </div>
</div>

See also on Jsfiddle.

Answer 1

Compared to your current code, what you need is to apply some CSS formatting to manipulate the look of the elements until you achieve what you want.

• Base preparation

  First, we use some CSS properties to define a basic aspect to the elements we want to move to circles:

  /* retirar aspeto de link */
  text-decoration: none;
  outline:0 none;
  
  /* passar link para bloco de linha, esconder texto dentro do mesmo */
  display: inline-block;
  text-indent:-9999px;
  overflow:hidden;
  
  /* definir um tamanho */
  width:14px;
  height:14px;
  
  /* aplicar cores */
  border: 1px solid #ccc;
  background-color:#fff;
  

• Pass square elements to round

  We can turn to the property border-radius to round the corners of an element, where from a given value we are effectively letting the element circulate.

  Site for demonstration: http://border-radius.com/

  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  

  ^{50% lets say: round the corners to half the width of each side, so a square is a circle.}

• Shading at the bottom of the element

  We can turn to the property box-shadow to cast a shadow on an element. The position of the shadow against the element, as well as whether it is outside or inside it are some of the options available.

  Site for demonstration: http://www.cssmatic.com/box-shadow

  For the example below I used:

  -webkit-box-shadow: inset 0px -2px 4px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: inset 0px -2px 4px 0px rgba(0,0,0,0.75);
  box-shadow: inset 0px -2px 4px 0px rgba(0,0,0,0.75);
  

  <sup>- inset to stay on the center side.
  - 0px -2px to stand horizontally in the centre and vertically to arise from below.
  - 4px 0px to that effect Blur with 4 pixels without propagation.
  - rgba(0,0,0,0.75) black color with 25% transparency.</sup>

What we saw above was the passage of your links that were the rectangles to the little circles:

• Before

  

• Afterward

  

Example

I made an example and I took the opportunity to optimize part of your code, but you should make the necessary adjustments if not 100% as intended.

Example also available on Jsfiddle.

$(document).ready(function() {

  $(".tab_content").hide();

  $(".tabs li:first").addClass("active").show();
  $(".tab_content:first").show();

  $("ul.tabs li").click(function(e) {
    e.preventDefault();

    var $this = $(this);

    $(".tabs .active").removeClass("active");
    $(".tab_content").hide();

    var activeTab = $this.addClass("active").find("a").attr("href");
    $(activeTab).fadeIn();
  });
});

.container {
  width: 500px;
  margin: 10px auto;
}
ul.tabs,
ul.tabs li {
  margin: 0;
  padding: 0;
}
ul.tabs {
  display: block;
  list-style: none;
  height: 32px;
  border: 1px solid #999;
  background-color: #f2f2f2;
}
ul.tabs li {
  display: inline-block;
  height: 32px;
  width: 32px;
  line-height: 32px;
  text-align: center;
}
ul.tabs li a {
  text-decoration: none;
  outline: 0 none;
  display: inline-block;
  text-indent: -9999px;
  overflow: hidden;
  width: 14px;
  height: 14px;
  border: 1px solid #ccc;
  background-color: #fff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
ul.tabs a:hover,
ul.tabs .active > a {
  background: red;
  border-color: transparent;
  -webkit-box-shadow: inset 0px -2px 4px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: inset 0px -2px 4px 0px rgba(0, 0, 0, 0.75);
  box-shadow: inset 0px -2px 4px 0px rgba(0, 0, 0, 0.75);
}
.tab_container {
  border: 1px solid #999;
  border-top: none;
  background: #fff;
  -webkit-border-radius: 0 0 5px 5px;
  -moz-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
}
.tab_content {
  padding: 20px;
  font-size: 1.2em;
}
.tab_content h2 {
  font-weight: normal;
  padding-bottom: 10px;
  border-bottom: 1px dashed #ddd;
  font-size: 1.8em;
}
.tab_content h3 a {
  color: #254588;
}
.tab_content img {
  float: left;
  margin: 0 20px 20px 0;
  border: 1px solid #ddd;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="container">
  <h1>teste</h1>

  <ul class="tabs">
    <li><a href="#tab1">1</a>

    </li>
    <li><a href="#tab2">2</a>

    </li>
    <li><a href="#tab3">3</a>

    </li>
    <li><a href="#tab4">4</a>

    </li>
    <li><a href="#tab5">5</a>

    </li>
  </ul>
  <div class="tab_container">
    <div id="tab1" class="tab_content">
      Conteúdo da tab 1
    </div>
    <div id="tab2" class="tab_content">
      Conteúdo da tab 2
    </div>
    <div id="tab3" class="tab_content">
      Conteúdo da tab 3
    </div>
    <div id="tab4" class="tab_content">
      Conteúdo da tab 4
    </div>
    <div id="tab5" class="tab_content">
      Conteúdo da tab 5
    </div>
  </div>
</div>

Answer 2

I edited your original code and the changes can be seen by comments from /* MODIFIED */;

https://jsfiddle.net/hvgh1px9/7/

The main change was made in javascript, which in the case is the following excerpt:

/* MODIFICADO */
//Alteramos a tab
window.setInterval(function() {
    var index = $('.tabs > .active').next('li').index() +1;
    if (index == 0) {
       $("a[href=#tab1]").trigger('click');
    } else {
        $("a[href=#tab"+index+"]").trigger("click");
    }
}, 2000);
/* FIM MODIFICADO */

In a 2-second interval, we check which tab is active. So you’re going to ask me, what does that stretch mean: if (index == 0) { ?

Running that part: $('.tabs > .active').next('li').index() it will always take the next index of a li and when there is no next one, it will return -1. In the case of +1, it will be 0; then when the index is 0, we will know that it is the first tab that should be displayed again... otherwise it will continue to activate the other tabs.

In terms of layout, I removed the names of the html tabs (Heading 1, Heading 2...) and added the following CSS to show small circles on tabs headers:

/* MODIFICADO */
/* Adicionamos o círculo no link da tab*/
ul.tabs li a:after {
    content: '\25CF';
} 
/* FIM MODIFICADO */