How to switch between tabs?

Question

Domain Name System

Good afternoon, help create several tabs on the page so that you can switch between them.
Example https://products.drweb.ru/win/security_space where (Buy, Features, Components..)
Preferably in HTML and CSS.
Thank you.

Answer 1

change the registrar to a normal one, finally, change the password, you haven’t restored your mail yet, it’s not clear what and how you have it, if the domain is registered to you, it means it wasn’t stolen, but just have access to the settings, you’re obscure something in general .
In order to be able to help you, you need to state from a to z the whole essence to the details.
Usually this is decided through the courts))

Answer 2

Go already to the normal registrar. Kroilovo on registrars always leads to popadalov when domains are hijacked.
Consult a specialized lawyer

Answer 3

What can be done?

You can see where the new ns leads and knock there.

Answer 4

So

Answer 5

Actually, everything is simple, but it takes longer to explain than just linking to a ready-made plugin: Ion.Tabs .

Answer 6

Like this, the first html, the second css, I did it for myself at my last job.

<dl class="tabs">
        <dt class="selected black">Мониторинг</dt>
        <dd class="selected">
          <div class="tab-content">
          <div id="wrapper">
          
                      <div id="row1">
    <strong>Registrator</strong>
  <ul>
  <li><a href="http://172.16.100.47/">Reg 1 (1094)</a></li>
  <li><a href="http://172.16.100.35/">Reg 2 (1094)</a></li>
  <li><a href="http://172.16.100.37/">Cam 1</a></li>
  <li><a href="http://172.16.100.38/">Cam 2</a></li>
  <li><a href="http://172.16.100.39/">Cam 3</a></li>
  <li><a href="http://172.16.100.41/">Cam 4</a></li>
</ul>
</div>
          
          
          <div id="row1 clear">
          <strong>Monitoring</strong>
          <ul>
        <li><a href="https://172.16.90.10:8443/ls/default.aspx">Lan Sweeper</a></li>
  <li><a href="http://172.16.90.22">Zabbix</a></li>
  <li><a href="http://172.16.90.91">Graylog</a></li>
  <li><a href="#">Dude - 172.16.1.157</a></li>
  <li><a href="http://www.pulkovoairport.ru/">Web Site</a>
  <?php
$url = 'http://pulkovoairport.ru';
ini_set('default_socket_timeout', '10');
$fp = fopen($url, "r");
$res = fread($fp, 500);
fclose($fp);
if (strlen($res) > 0) 
  echo '<img src="ok.png"></img>';
else 
  echo '<img src="neok.png"></img>';
?>
  </li>
  </ul>
  </div>
          
<div class="wrapper2">
          
        </dd>
        
          <dt class="black">Управление</dt>
        <dd>
        <div class="tab-content">
        <div id="wrapper2">

  <div id="row1">
 <strong>Blade 1003</strong>
 <ul>
 <li><a href="http://172.16.50.190">Blade</a></li>
<li><a href="http://172.16.50.140">SW 01</a></li>
<li><a href="http://172.16.50.141">SW 02</a></li>
<li><a href="http://172.16.50.132">SW 07 Up</a></li>
<li><a href="http://172.16.50.133">SW 08 Down</a></li>
</ul>
</div>
  <div id="row1">
<strong>Blade 1094</strong>
 <ul>
<li><a href="http://172.16.50.189">Blade</a></li>
<li><a href="http://172.16.50.142">SW 03</a></li>
<li><a href="http://172.16.50.143">SW 04</a></li>
<li><a href="http://172.16.50.134">SW 05 Up</a></li>
<li><a href="http://172.16.50.135">SW 06 Down</a></li>
</ul>
</div>

body {
        background-image:url(../img/grey.png); 
        color:#000;
        font-family:Lucida Console;
        line-height:1.6;
      }
      
      #page {
        width:70%;
        margin:10px auto;
      }
      
      
      .tabs {
        width:100%;
        overflow:hidden;
        font-size:0.9em;
        margin:2em 0;
        zoom: 1;
        padding:1px;
        position:relative;
      }
      
      .tabs dt {
        float:left;
        line-height:2;
        height:2em;
        background:#e8f0f5;
        border:1px solid #e8f0f5;
        border-bottom:0;
        padding:0 1em;
        position:relative;
        left:35px;
        margin-right:1px;
        cursor:pointer;
        
        -webkit-border-top-left-radius:10px;
        -webkit-border-top-right-radius:10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
      }
      
      .tabs dt:hover {
        background-color:#bfdff4;
      }
      
      .tabs dt.selected {
        border-color:#b0d0e9;
        background:#fff;
        z-index:3;
        cursor:auto;
      }
      
      .tabs dd {
        background:#fff;
        display:none;
        float:right;
        width:100%;
        margin:2em 0 0 -100%;
        position:relative;
        z-index:2;
      }
      
      .tabs dd.selected {
        display:block;
      }
      
      .tabs .tab-content {
        border:1px solid #b0d0e9;
        padding:20px;
        
        -webkit-border-radius:20px;
        -moz-border-radius:20px;
        border-radius:20px;
      }
      
      .red {
      color: red;
      font-weight: bold;
      }
      
      .black {
      color: #2464b2;
      font-weight: 700;
      }
      
      .center {
      text-align: center;
      }
      
      a {
 
-moz-transition: color 0.2s 0.02s ease;
 -o-transition: color 0.2s 0.02s ease;
 -webkit-transition: color 0.2s 0.02s ease;
 color:#222;
 }
 
a:hover {
 color: #1FA2E1;
 }
 

#right { 
        float:left; 
    width:240px;
    clear:both;
        }
    
    #left { 
        float:left; 
    width:180px;
    clear:both;
        }

#clear {
        clear:both;
        }

    
#wrapper {
width:500px;
height: 250px;
}

br {margin-top:0px;margin-bottom:0px;}

#row {
    float:left; 
    width:240px;
      
        }

    #row1 {
    float:left; 
    width:180px;
      display: block;
        }
    
    #row5 {
    float:left; 
    width:220px;
      display: block;
        }
    
    #distr {
    float:left; 
    width:220px;
      display: block;
        }
    
    #distr2 {
    float:left; 
    width:440px;
      display: block;
      margin-bottom:20px;
        }
    
        #wrapd {
width:800px;
height: 300px;
display: block;
}
    
    
    #vm {
    float:left; 
    width:250px;
      display: block;
        }
    
    #wrapper2 {
width:800px;
height: 300px;
display: block;
}

.socialBox {
  color:#666;
  display:inline-block;
  *display:inline;
  zoom: 1;
}

.socialBox .vk, .socialBox .fb, .socialBox .lj, .socialBox .tw, .socialBox .yt {
  display:inline-block;
  zoom:1;
  width: 18px;
  height:18px;
  background-image: url('../img/socials.png');
  background-color: transparent;
  margin-right:3px;
  text-align: center;
}

.socialBox .vk {
  background-position: 0 0;
}
.socialBox .fb {
  background-position: -26px 0;
}
.socialBox .lj {
  background-position: -50px 0;
}
.socialBox .tw {
  background-position: -78px 0;
  width:21px;
}
.socialBox .yt {
  background-position: -109px 0;
}