导航栏问题解决

最新推荐文章于 2018-05-11 15:37:34 发布

南中阙

最新推荐文章于 2018-05-11 15:37:34 发布

阅读量586

点赞数

分类专栏：常用代码文章标签：导航

本文链接：https://blog.csdn.net/Zeus_i/article/details/74011314

版权

常用代码专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<div class="tab_hd_inner">
    <volist name="plist" id="item">
        <div type="index" data-index="0" οnclick="jump({twotree#$item['id']})" id='{twotree#$item['id']}' class="item">{twotree#$item.name}</div>
    </volist>
</div>

<script>
    function jump(id) {
        window.location.href='index.php?g=App&m=Cms&a=lists&id='+id;
    }
   
   function getQueryParam(name){
       var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
       var r = window.location.search.substr(1).match(reg);
       if(r!=null)
       return  unescape(r[2]);
       return null;
   }
   
    var  aid =getQueryParam('id');
    var  qid  =$('#hid').val();
   if(aid==null){
      $('.tab_hd_inner .item').eq(0).addClass('active');
   }
   if(aid==qid){
      $('#'+aid).addClass('active');
   }
</script>

//仿爱奇艺 导航栏切换

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>超简洁的爱奇艺轮播图仿制-jq22.com</title>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<style>
body {
   margin:0px;
   padding:0px;
}
#bbox {
   position:relative;
   margin:0 auto;
   margin-top:20px;
}
#bbox,#pics {
   width:100%;
   height:410px;
}
#pics {
   }.pic {
   position:absolute;
}
#nav_list {
   width:247px;
   height:371px;
   background-image:url(../images/site-focuslist_bg_new.png);
   position:absolute;
   top:12px;
   right:10px;
}
#lists {
   padding-top:24px;
}
.lis {
   width:221px;
   list-style:none;
   margin:0 auto;
}
.tag {
   width:221px;
   margin:0 auto;
   font-size:14px;
   color:#000;
   display:block;
   line-height:33px;
   text-decoration:none;
   text-indent:20px;
}
.bg {
   background-color:#63b504;
}
</style>
</head>
<body>
<div id="bbox">
       <div id="pics">
            <div class="pic"><img src="http://www.jq22.com/img/cs/500x300-1.png"></div>
            <div class="pic"><img src="http://www.jq22.com/img/cs/500x300-2.png"></div>
            <div class="pic"><img src="http://www.jq22.com/img/cs/500x300-3.png"></div>
            <div class="pic"><img src="http://www.jq22.com/img/cs/500x300-4.png"></div>
            <div class="pic"><img src="http://www.jq22.com/img/cs/500x300-5.png"></div>
            <div class="pic"><img src="http://www.jq22.com/img/cs/500x300-6.png"></div>
            <div class="pic"><img src="http://www.jq22.com/img/cs/500x300-7.png"></div>
            <div class="pic"><img src="http://www.jq22.com/img/cs/500x300-8.png"></div>
            <div class="pic"><img src="http://www.jq22.com/img/cs/500x300-9.png"></div>
            <div class="pic"><img src="http://www.jq22.com/img/cs/500x300-6.png"></div>
        </div>
        <div id="nav_list">
           <nav id="lists">
            <li class="lis"><a class="tag  bg" href="javascript:void(0)">余罪2: 卧底兄弟团整装齐发 </a></li>
            <li class="lis"><a class="tag" href="javascript:void(0)">我们的法则:四爷军刀傍身登岛</a></li>
            <li class="lis"><a class="tag" href="javascript:void(0)">跑男：宋小宝成民歌宝藏</a></li>
            <li class="lis"><a class="tag" href="javascript:void(0)">十三亿分贝:河南权志龙登场</a></li>
            <li class="lis"><a class="tag" href="javascript:void(0)">挑战者联盟：小新杠上薛之谦</a></li>
            <li class="lis"><a class="tag" href="javascript:void(0)">好先生：张艺兴电视首秀上线</a></li>
            <li class="lis"><a class="tag" href="javascript:void(0)">跨界歌王:刘涛挑战高难度情歌</a></li>
            <li class="lis"><a class="tag" href="javascript:void(0)">加油美少女：晓明变呆萌教主</a></li>
            <li class="lis"><a class="tag" href="javascript:void(0)">电影圈双子座女星大起底</a></li>
            <li class="lis"><a class="tag" href="javascript:void(0)">蜜蜂少女队：林志颖助阵拉票</a></li>
           </nav>
        </div>
    </div><script>
// JavaScript Document
//定义图片的下标值为i
var i = 0;
var timer = null;
$(function() {
    //图片默认显示第一张，隐藏其它图片
    $(".pic").eq(0).show().siblings().hide();
    //调用时间定时器方法
    getTimer();

    //鼠标移上列表的事件
    $(".lis").hover(function() {
        //通过相应的列表下标找到对应的图片
        i = $(".lis").index($(this));
        //调用显示方法
        show();
        //清除时间定时器
        clearInterval(timer);
    }, function() {
        //获取到新的图片下标后重新绑定时间定时器
        getTimer();
    });

    //设置时间定时器，时间设置为4执行一次
    function getTimer() {
        timer = setInterval(function() {
            //执行下一张图片
            i++;
            //如果播放到最后一张，就调回第一张，循环播放
            if (i == 10) {
                i = 0;
            }
            show();
        }, 4000);
    }

    //轮播图的循环显示方法
    function show() {
        //显示图片
        $(".pic").eq(i).show().siblings().hide();
        //显示列表
        $(".tag").parent().eq(i).children().addClass("bg").parent().siblings().children().removeClass("bg");
    }
})</script>
</body>
</html>