常用效果

jq跨页面实现给nav加类名（传值）

html:

<ul class="menu" id="menu">
    <li><a href="a.html">首页</a></li>
    <li><a href="b.html">SEO优化</a></li>
    <li><a href="c.html">生活娱乐</a></li>
</ul>

js:

<script >
    $(document).ready(function () {
        $(".menu li a").each(function () {
            $this = $(this);
            if ($this[0].href == String(window.location)) {
                $this.parent().addClass("on");
            }
        });
    });
</script>

css:

<style>
    .menu {
        padding: 0;
        margin: 0;
        list-style-type: none;
    }
    .menu li {
        background: #FFD1A4;
        margin-right: 1px;
        float: left;
        color: #fff;
    }
    .menu li a {
        display: block;
        width: 80px;
        text-align: center;
        height: 32px;
        line-height: 32px;
        color: #fff;
        font-size: 13px;
        text-decoration: none;
    }
    .on {
        background: #D96C00;
        font-weight: bold;
    }
</style>

手风琴（jq）

html:

 <div class="msb7">
            <div class="t-center relative">
                <div class="cont">
                    <div class="mt1100 imgSlides relative">

                        <ul class="mt1100 clearfix" id="sq7List">
                            <li class="">
                                <div>
                                    <p class="mt">
                                        <em> ROCKETS CLASS</em>
                                        <span>你引导你</span>
                                    </p>
                                </div>
                            </li>
                            <li class="">
                                <div>
                                    <p class="mt">
                                        <em style="margin-left: -89px;"> ROCKETS CLASS</em>
                                        <span>题目共享</span>
                                    </p>
                                </div>
                            </li>
                            <li class="">
                                <div>
                                    <p class="mt">
                                        <em style=" margin-left: -12px;
                    "> ROCKETS CLASS</em>
                                        <span style="margin-right: 15px;">战”</span>
                                    </p>
                                </div>
                            </li>
                            <li class="">
                                <div>
                                    <p class="mt">
                                        <em style="margin-left: -87px;"> ROCKETS CLASS</em>
                                        <span>有班级，事半功倍</span>
                                    </p>
                                </div>
                            </li>
                            <li class="">
                                <div>
                                    <p class="mt">
                                        <em style="margin-left: -59px;"> ROCKETS CLASS</em>
                                        <span>时老师答疑</span>
                                    </p>
                                </div>
                            </li>
                            <li class="active">
                                <div>
                                    <p class="mt">
                                        <em style="margin-left: -86px;">KETS CLASS</em>
                                        <span>严格的考试机制，才能查漏补缺</span>
                                    </p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
         
        </div>

js:

 var sq7List = document.getElementById('sq7List');
            var sq7ListChildNodes = sq7List.childNodes;
            for (var n = 0; n < sq7ListChildNodes.length; n++) {
                sq7ListChildNodes[n].onmouseenter = function (e) {
                    for (var _n = 0; _n < sq7ListChildNodes.length; _n++) {
                        sq7ListChildNodes[_n].className = "";
                    }
                    this.className = "active";
                    window.event ? window.event.cancelBubble = true : e.stopPropagation(); //兼容ie阻止冒了-cancelBubble
                    e.preventDefault ? e.preventDefault() : window.event.returnValue == false; //兼容ie阻止默认行为
                };
            }

less:

.msb7 {
  background-color: #FAFBFD;
  .pt(60);
  .pb(50);
.imgSlides {
  .mt(40);
    font-size: 0px;
  }
.imgSlides > ul {
    width: 1095px;
    height: 442px;
    overflow: hidden;
    border-radius: 10px 50px 10px 50px;
  }
.imgSlides > ul li {
    width: 80px;
    height: 442px;
    float: left;
    cursor: pointer;
    transition: all .8s;
     overflow: hidden;
  }
.imgSlides > ul li div {
    width: 80px;
    height: 443px;
    background-color: rgba(0, 0, 0, 0.5);
    transition: all 1s;
  
  }
  
.imgSlides > ul li.active div {
    background: transparent;
    p.mt {
      display: block;
    }
  }
.imgSlides > ul li p {
    width:692px;
  height:62px;
  background:rgba(0,0,0,.6);
  transition: all 1.2s;
  display: none;
  margin-top:367px;
  position: relative;
  text-align: right;
  }

.imgSlides > ul li p span {
  font-size:24px;
  color: #fff;
  line-height: 62px;
  margin-right: 28px;
  position: relative;
  z-index:1;
  font-weight: bold;
  }
.imgSlides > ul li p em {
    font-size: 26px;
        margin-top: 25px;
      margin-left: -24px;color: #fff;
      opacity: .3;
      position: absolute;
      z-index: 0;
      font-weight: bold;
  
  }
  
.imgSlides > ul li.active {
    width: 692px;
  }
.imgSlides > ul li:first-child {
    z-index: 1;
    background: url('../img/bj-msb-hj1.png') center center no-repeat;
  }
.imgSlides > ul li:nth-child(2) {
    left: 80px;
    z-index: 22;
    background: url('../img/bj-msb-hj2.png') center center no-repeat;
  }
.imgSlides > ul li:nth-child(3) {
    left: 160px;
    z-index: 33;
    background: url('../img/bj-msb-hj3.png') center center no-repeat;
  }
.imgSlides > ul li:nth-child(4) {
    left: 240px;
    z-index: 44;
    background: url('../img/bj-msb-hj4.png') center center no-repeat;
  }
.imgSlides > ul li:nth-child(5) {
    left: 310px;
    z-index: 55;
    background: url('../img/bj-msb-hj5.png') center center no-repeat;
  }
.imgSlides > ul li:nth-child(6) {
    left: 390px;
    z-index: 66;
    background: url('../img/bj-msb-hj6.png') center center no-repeat;
  }
  .avc{
    a{
      width: 278px;
      height: 84px;
      font-size: 24px;
      font-weight: bold;
      color: #ffffff;
      text-shadow: 0px 2px 5px rgba(252, 30, 28, 0.8);
      text-align: center;
      line-height: 80px;
      background: url(../img/ydx06.png) no-repeat center center;
      background-size: 278px 84px;
      .trans4;
      .ml(10);
      .mr(10);
      display: block;
      .mt(26);
    }
    a:hover{
      .translate4;
    }
  }
}