SOURCE

$(document).ready(function() {
  $(".nav_link_ul").hide();
  $(".nav_link_f a").click(function() {
    $(this).parent().toggleClass("select");
    $(this).parent().prevAll(".nav_link_f").removeClass("select") $(this).parent().nextAll(".nav_link_f").removeClass("select") $(this).parent().next().slideToggle();
    $(this).parent().prevAll(".nav_link_ul").slideUp("slow");
    $(this).parent().next().nextAll(".nav_link_ul").slideUp("slow");
    return false;
  });
});

$(function() {
  $('.nav_link_ul li a div').click(function() {
    $(this).addClass('active');
    $('.nav_link_ul li a div').not(this).removeClass('active');
  });
  $('.nav_link_ul li a p').click(function() {
    $(this).addClass('active');
    $('.nav_link_ul li a p').not(this).removeClass('active');
  });
  $('.nav_link_f a div').click(function() {
    $(this).addClass('active');
    $('.nav_link_f a div').not(this).removeClass('active');
  });
  $('.nav_link_f a p').click(function() {
    $(this).addClass('active');
    $('.nav_link_f a p').not(this).removeClass('active');
  });
});

<div>
  <div class="navbar" id="navbar">
    <div id="lside">
      <div class="head">
        <div class="nav_link_f">
          <a id="homeLink" href="#">
            <div>
              <p class="home" id="home">
              </p>
            </div>
          </a>
        </div>
      </div>
      <div>
        <div class="nav_link_f">
          <a id="lawLink" href="#">
            <div>
              <p class="law" id="law">
              </p>
            </div>
          </a>
        </div>
      </div>
      <div id="nav_link">
        <div class="nav_link_f">
          <a href="#">
            <p class="divide" id="divide">
            </p>
          </a>
        </div>
        <ul class="nav_link_ul">
          <li>
            <a id="payoffLink">
              <div>
                <p class="payoff" id="payoff">
                </p>
              </div>
            </a>
          </li>
          <li>
            <a id="bankLink">
              <div>
                <p class="bank" id="bank">
                </p>
              </div>
            </a>
          </li>
        </ul>
        <div class="nav_link_f">
          <a href="#">
            <p class="real" id="real">
            </p>
          </a>
        </div>
        <ul class="nav_link_ul">
          <li>
            <a id="evaluationLink">
              <div>
                <p class="evaluation" id="evaluation">
                </p>
              </div>
            </a>
          </li>
          <li>
            <a id="projectLink">
              <div>
                <p class="project" id="project">
                </p>
              </div>
            </a>
          </li>
          <li>
            <a id="identityLink">
              <div>
                <p class="identity" id="identity">
                </p>
              </div>
            </a>
          </li>
          <li>
            <a id="useLink">
              <div>
                <p class="use" id="use">
                </p>
              </div>
            </a>
          </li>
          <li>
            <a id="noticeLink">
              <div>
                <p class="notice" id="notice">
                </p>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

img {
  border: 0;
}

li {
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

ol,
ul,
li,
dl,
dt,
dd {
  list-style: none;
}

a {
  text-decoration: none;
  color: #fff;
}

.navbar {
  height: 100%;
}

.main {
  /*	position:fixed;
	margin-left:0;
	top:0;*/
}

.navbar {
  /*position:fixed;*/
  /*页面中单独使用时，需取消注释*/
  margin-left: 0;
  top: 0;
  width: 100px;
}

#lside {
  background-color: #F1F8FE;
  overflow: hidden;
  border: 1px solid #4563D1;
  border-radius: 0 4px 4px 0;
  /*margin-top:120px;*/
  /*页面中单独使用时，需取消注释*/
}

.nav_link_ul li {
  width: 100px;
  height: 74px;
}

.nav_link_ul li a div {
  width: 100%;
  height: 100%;
}

.nav_link_ul li a div.active {
  background: #5E7BE5;
}


/*.nav_link_f a div.active{
	background:#5E7BE5;
}*/

#homeLink .home {
  background: url(../img/nava.png) no-repeat;
  width: 100px;
  height: 45px;
}

#homeLink p.active {
  background: url(../img/nava_fa.png) no-repeat;
}

#lawLink .law {
  background: url(../img/law.png) no-repeat;
  width: 100px;
  height: 45px;
}

#lawLink p.active {
  background: url(../img/law_fa.png) no-repeat;
}

.nav_link_f .divide {
  background: url(../img/menu1.png) no-repeat;
  width: 100px;
  height: 45px;
}

.nav_link_f .real {
  background: url(../img/menu2.png) no-repeat;
  width: 100px;
  height: 45px;
}

#payoffLink .payoff {
  background: url(../img/navf.png) no-repeat;
  width: 100px;
  height: 74px;
}

#payoffLink p.active {
  background: url(../img/navf_1.png) no-repeat;
}

#bankLink .bank {
  background: url(../img/bank.png) no-repeat;
  width: 100px;
  height: 74px;
}

#bankLink p.active {
  background: url(../img/bank_1.png) no-repeat;
}

#evaluationLink .evaluation {
  background: url(../img/navg.png) no-repeat;
  width: 100px;
  height: 74px;
}

#evaluationLink p.active {
  background: url(../img/navg_1.png) no-repeat;
}

#projectLink .project {
  background: url(../img/navb.png) no-repeat;
  width: 100px;
  height: 74px;
}

#projectLink p.active {
  background: url(../img/navb_1.png) no-repeat;
}

#identityLink .identity {
  background: url(../img/navc.png) no-repeat;
  width: 100px;
  height: 74px;
}

#identityLink p.active {
  background: url(../img/navc_1.png) no-repeat;
}

#useLink .use {
  background: url(../img/navd.png) no-repeat;
  width: 100px;
  height: 74px;
}

#useLink p.active {
  background: url(../img/navd_1.png) no-repeat;
}

#noticeLink .notice {
  background: url(../img/nave.png) no-repeat;
  width: 100px;
  height: 74px;
}

#noticeLink p.active {
  background: url(../img/nave_1.png) no-repeat;
}

.Ibut {
  width: 100px;
  bottom: 0;
  left: 0;
  background: #6bb6a1;
  position: absolute;
  height: 30px;
  z-index: 3;
}

.Ibut a {
  display: inline-block;
  height: 28px;
  line-height: 28px;
  width: 45px;
  text-align: center;
  background-color: #055249;
  color: #d1ffdd;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#a9d693), to(#70c5b1));
  background: -moz-linear-gradient(#a9d693, #70c5b1);
  background: linear-gradient(#a9d693, #70c5b1);
  filter: progid: DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#a9d693, endColorStr=#70c5b1);
  border: #6bb6a1 solid 1px;
}

.Ibut .btn-up {
  border-right: #a9d693 solid 1px;
  cursor: pointer;
}

.Ibut span {
  display: block;
  width: 17px;
  height: 10px;
  margin: 0 auto;
  margin-top: 10px;
  cursor: pointer;
}

.Ibut .btn-up span {
  background: url(../img/btnup.gif) no-repeat 0 0;
}

.Ibut .btn-down span {
  background: url(../img/btndown.gif) no-repeat 0 0;
}