sim4ik-one,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.active{
color: #8B4513;
background-color:#00FA9A;
border: solid 1px #8B4513;
padding: 3px
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var a = $("#menu a"),
b = $("#port > div");
a.click(function(event) {
event.preventDefault()
$(".active").not(this).click();
var a = this.getAttribute("href");
b.filter(function() {
return a != "#" + this.id
}).toggle();
$(this).toggleClass("active")
})
});
</script>
</head>
<body>
<div id="menu">
<a href="#cat1">Пункт 1</a>
<a href="#cat2">Пункт 2</a>
<a href="#cat3">Пункт 3</a>
<a href="#cat4">Пункт 4</a>
</div>
<div id="port">
<div id="cat1">Работа 1</div>
<div id="cat3">Работа 2</div>
<div id="cat1">Работа 3</div>
<div id="cat2">Работа 4</div>
<div id="cat3">Работа 5</div>
<div id="cat3">Работа 6</div>
<div id="cat2">Работа 7</div>
<div id="cat2">Работа 8</div>
</div>
</body>
</html>