.item {
cursor: pointer;
}
.item.active {
background-color: yellow;
}
.item.active .content{
display: inline-block;
}
.item .content {
display: none;
}
.item .nav.active {
background-color: blue;
display: inline-block;
}
.item .content .tabs .tab {
display: inline-block;
}
.item .content .for-tabs .cont:first-child {
display: block;
}
.item .content .for-tabs .cont {
display: none;
}
$('.item').click(function() {
$('.item').not($(this)).removeClass('active');
$(this).toggleClass('active');
});
$(".tab").click(function(e) {
var ind = $(this).index();
$(".tab").removeClass("active");
$(".cont").hide();
$(this).addClass("active").closest(".content").find(".cont").eq(ind).show();
e.stopPropagation();
});
<div id="page">
<a href="#" onclick="create('1')">1</a>
<a href="#" onclick="create('2')">2</a>
<a href="#" onclick="create('3')">3</a>
<a href="#" onclick="create('4')">4</a>
<a href="#" onclick="create('5')">5</a>
<div class="window">
<img class="image" src="/foto/1.png">
<a class="button"></a>
</div>
<div class="window">
<img class="image" src="/foto/2.png">
<a class="button"></a>
</div>
<div class="window">
<img class="image" src="/foto/3.png">
<a class="button"></a>
</div>
<div class="window">
<img class="image" src="/foto/4.png">
<a class="button"></a>
</div>
<div class="window">
<img class="image" src="/foto/5.png">
<a class="button"></a>
</div>
</div>
при скролле страницы
$("body").on("click", ".block3", function(event){
$("#context-menu").show()
.css({
display: "block",
position: "absolute"
})
.offset({left: event.pageX, top: event.pageY});
event.stopPropagation();
}