<a href="#div1" class="link">Первая</a>
<a href="#div2" class="link">Вторая</a>
<a href="#div3" class="link">Третья</a>
<a href="#div4" class="link">Четвертая</a>
<br><br>
<div class="bar" id="div1">Текст1</div>
<div class="bar" id="div2">Текст2</div>
<div class="bar" id="div3">Текст3</div>
<div class="bar" id="div4">Текст4</div>
<script>
$(function() {
$('.link').on('click', function(e) {
e.preventDefault();
$('.bar').each(function() {
$(this).css('display', 'none');
});
var block = $(this).attr('href');
$(block).css('display', 'block');
});
});
</script>
<script>
$(document).on('click', '.link', function(e) {
$(this).addClass('link_clicked');
e.preventDefault();
$('.bar').each(function() {
$(this).css('display', 'none');
});
var block = $(this).attr('href');
$(block).css('display', 'block');
});
$(document).on('click', '.link_clicked', function(e) {
e.preventDefault();
$(this).removeClass('link_clicked');
var block = $(this).attr('href');
$(block).css('display', 'none');
});
})
</script>
$(function() {
$('.link').on('click', function(e) {
e.preventDefault();
$('.bar').each(function() {
$(this).css('display', 'none');
});
var block = $(this).attr('href');
if($(this).hasClass('active')) {
$(this).removeClass('active');
$(block).css('display', 'none');
}
else {
$(this).addClass('active');
$(block).css('display', 'block');
}
});
});