How to avoid mouse click using javascript
<p>For doing a tabs i have taken reference from w3css tabs there they given three tabs which are like london, paris, tokyo like that on refresh of the page all div contents will hidden when click on any tab the respective content is going to open.<br>
    In my project i should have tabs like that only </p>

<pre><code>                 |   tab1          tab2           tab3
                 |
link for tab page|
                 |
                 |
</code></pre>

<p>this is the design i had in my project when i click on link for the tab page the tab1 tab2 tab3 are appeared that time the contents of all tabs are hidden thats right but after opened tab1 i do some selection in form expect data from database that time page going to refresh so all the tabs going to hidden stage </p>

<p>i am looking for like this when i click link for the tab page all the tabs should be hidden when i click on any tab it should not go to hidden stage until either other tabs should click or link for the tab page</p>

<p><strong>code</strong></p>

<pre><code> &lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;title&gt;W3.CSS&lt;/title&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
&lt;link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"&gt;
&lt;style&gt;
.city {display:none;}
&lt;/style&gt;
&lt;body&gt;

&lt;div class="w3-container"&gt;
 &lt;a href="tabs.html"&gt;links for the tab page&lt;/a&gt;

  &lt;div class="w3-row"&gt;
    &lt;a href="javascript:void(0)" onclick="openCity(event, 'London');"&gt;
      &lt;div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding"&gt;Tab1&lt;/div&gt;
    &lt;/a&gt;
    &lt;a href="javascript:void(0)" onclick="openCity(event, 'Paris');"&gt;
      &lt;div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding"&gt;Tab2&lt;/div&gt;
    &lt;/a&gt;
    &lt;a href="javascript:void(0)" onclick="openCity(event, 'Tokyo');"&gt;
      &lt;div class="w3-third tablink w3-bottombar w3-hover-light-grey w3-padding"&gt;Tab3&lt;/div&gt;
    &lt;/a&gt;
  &lt;/div&gt;

  &lt;div id="London" class="w3-container city"&gt;
    &lt;h2&gt;London&lt;/h2&gt;
    &lt;p&gt;London is the capital city of England.&lt;/p&gt;
  &lt;/div&gt;

  &lt;div id="Paris" class="w3-container city"&gt;
    &lt;h2&gt;Paris&lt;/h2&gt;
    &lt;p&gt;Paris is the capital of France.&lt;/p&gt;
  &lt;/div&gt;

  &lt;div id="Tokyo" class="w3-container city"&gt;
    &lt;h2&gt;Tokyo&lt;/h2&gt;
    &lt;p&gt;Tokyo is the capital of Japan.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
function openCity(evt, cityName) {
  var i, x, tablinks;
  x = document.getElementsByClassName("city");
  for (i = 0; i &lt; x.length; i++) {
     x[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i &lt; x.length; i++) {
     tablinks[i].className = tablinks[i].className.replace(" w3-border-red", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.firstElementChild.className += " w3-border-red";
}
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>