JSFiddle - React, Tailwind, and code Playground

HTML

<link href="style/style.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="js/jquary.js"></script>
<script type="text/javascript" src="js/script.js"></script>

<body>
    <div id="nav">
	     <ul  class="Mynav">
		 <b>
		 <tr><li><a href="h.html">Главная страница</a></li>
		 <li class="view">Виды</li>
		 <li class="company">Компании</li>
		 <li class="cities">Города</li></tr>
		 </b>
		 <div id="block1"></div>
		 <div id="block2"></div>
		 <div id="block3"></div>
		 </ul>
	  </div>
    </body>

CSS

body{
     margin:0;
	 padding:0;
	 background-color:#cccccc;
	 background-image:url("../bg/bg.bmp");
	 background-repeat:no-repeat;
	 background-position:center;
	 font:16px Segoe script;
	 }
	 
	 a{
	 text-decoration:none;
	  }
	 
	 a:link{
	 color:#ffff66;
	 }
	 
	 a:visited{
	 color:#ffff66;
	 }
	 
div#wrapper{

    
	 width:1000px;
	 height:1500px;
	 margin:0 auto;
	 }
	 
ul {
    width: 1000px;
    height:60px;
	
    margin: 0px;
    padding: 0px;
    list-style: none;
}
li {
    width: 248px;
    
   height:60px;
}
li:first-child {
    margin-left: 0;
}
li:last-child {
    margin-right: 0;
}
	 /* Задаем сброс обтекания */
.clear{
margin-top: -1px;
	height: 1px;
	clear:both;
	
}
div#header{
     background:url("../bg/header.bmp");
	 
	 height:300px;
	
	 }
	 
	div[id^=block]{
	  margin-top:60px;
	 outline:1px solid #cc0000;
	  background:#3399ff;
	  position:absolute;
	  	 width:290px;
	 height:260px;
	 margin-left:250px;
	 }	
	.active{
	background-color:#3399ff;
	}

div#nav{
     background:url("../bg/nav.png") repeat-x;
	 height:60px;
	 outline:1px solid #cc0000;
	 margin-bottom:20px;
	 position:relative;
	 }
	 
	 .Mynav{
	     outline:1px solid #cc0000;
		 position: absolute;
		 color:#ffff66;

		 }
	.Mynav li{
	float:left;
	display:inline-block;
	outline:1px solid #cc0000;
	text-align:center;
	font-size:20px;
	border-right:1px solid #3c37d9;
	border-left:1px solid #3880d9;
	}
	
	.Mynav li:hover{
	background-color:#3399ff;
	}

JavaScript

$(document).ready(function(){
	
	$('div[id^=block]').hide();
	
	$('li.view').click(function(){
		$('ul.Mynav>li:not(li.view)').removeClass('active');
		$(this).addClass('active');
		$('div#block1').fadeIn(200);
	$('div[id^=block]:not(div#block1)').fadeOut(200);
		});
	
		$('li.company').click(function(){
		$('ul.Mynav>li:not(li.company)').removeClass('active');
		$(this).addClass('active');
		$('div#block2').fadeIn(200);
	$('div[id^=block]:not(div#block2)').fadeOut(200);
		});
		
			$('li.cities').click(function(){
		$('ul.Mynav>li:not(li.cities)').removeClass('active');
		$(this).addClass('active');
		$('div#block3').fadeIn(200);
	$('div[id^=block]:not(div#block3)').fadeOut(200);
		});
		
	
});