JSFiddle - React, Tailwind, and code Playground
HTML
<div><a href='#tab2'> Эта ссылка должна открывать таб пункта меню 3</a>
</div>
<aside id="side-right">
<div class="side-irregularity"></div>
<div class="side-right-prominency">
<div class="prominency">
<div class="side-right-top">ДАННЫЙ СЕРВИС ПОМОЖЕТ ВАМ БЫСТРО ПОЛУЧИТЬ КРЕДИТ НА ЛЮБЫЕ НУЖДЫ!</div>
<div class="side-right-bottom clearfix">
<nav class="side-right-navigation clearfix">
<ul>
<li class='tab1' id='tab1'><a href="#1">Меню 1</a></li>
<li class='tab2' id='tab1'><a href="#tab2" onclick="$('a[href=\'#tab2\']').trigger('click');">Меню 2</a> </li>
<li class='tab3' id='tab3'><a href="#3">Меню 3
</a>
</li>
<li class='tab4' id='tab4'><a href="#4">
Меню 4 </a>
</li>
</ul>
</nav>
<div class="side-right-cutting clearfix" style="padding-left: 10px; padding-right: 10px;">
<ul class="side-right-navigation">
<li class="widget1">
<div class="side-side-form-item">
<div class="1active" width="240">
<table width="240" border="1" bordercolor="red" height="3px">
<tr>
<td width="60">
<img src="{THEME}/img/ip.png" alt="/" />
</td>
<td width="60">
<img src="{THEME}/img/ii.png" style="visibility:hidden" alt="/" />
</td>
...
CSS
@charset"utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
label {
display: block;
}
.form-item label {
display: block;
font-weight: bold;
cursor: default;
}
body {
text-align:justify;
margin:0px;
padding:0px;
width:100%;
height:100%;
font-family: Tahoma;
}
html {
height: 100%;
}
ol, ul {
list-style: none;
}
/* TYPOGRAPHY */
@font-face {
font-family: EuropeBold;
font-style: normal;
font-weight: normal;
src: url("../font/EuropeBold/EuropeBold.eot?#iefix") format("embedded-opentype"), url("../font/EuropeBold/EuropeBold.woff") format("woff"), url("../font/EuropeBold/EuropeBold.ttf") format("truetype"), url("../font/EuropeBold/EuropeBold.svg#EuropeBold") format("svg");
}
@font-face {
font-family: ThamesC;
font-style: normal;
font-weight: normal;
src: url("../font/ThamesC/ThamesC.eot?#iefix") format("embedded-opentype"), url("../font/ThamesC/ThamesC.woff") format("woff"), url("../font/ThamesC/ThamesC.ttf") format("truetype"), url("../font/ThamesC/ThamesC.svg#ThamesC") format("svg");
}
a {
}
a:hover {
text-decoration:none;
}
/* END TYPOGRAPHY */
header, nav, section, article, aside, footer {
display: block;
}
/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:before, .clearfix:after {
content:'\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {
clear: both;
}
/* ----style-form---*/
::-webkit-input-placeholder {
color:#84817e;
}
:-moz-placeholder {
color:#84817e;
}
.placeholder {
color:#84817e;
}
/* ----end-style-form---*/
body {
background: url("../img/body.jpg") repeat;
}
#header {
margin: 0 auto;
padding: 15px 0px 20px 0px;
width: 970px;
}
#header...
JavaScript
$(document).ready(function () {
$('#side-right .widget1').hide();
$('#side-right .widget1:first').show();
$('.side-right-navigation ul li:first').addClass('selected');
$('.side-right-navigation ul li').click(function () {
$('.side-right-navigation ul li').removeClass('selected');
$(this).addClass('selected');
$('#side-right .widget1').hide();
$('#side-right .widget1').eq($('.side-right-navigation ul li').index(this)).fadeIn(500);
});
});