页面效果图

html:

左边导航，这里类似teb，点击切换，使用了bootstrap插件写的 内容布局，每一块里面都添加了上下一篇按钮

js:

$(function () {

//循环内容里面的li

            $(".omapp-foot-btn ul").find("li").each(function () {

//遍历内容里面的a标签的href

                var objUrl = $(this).children("a").attr("href");

                //console.log(objUrl);

//点击对应的内容里面的按钮

                $(this).click(function () {

//遍历点击到内容里面的a标签的href

                    var objhref = $(this).children("a").attr("href");

                    //console.log(objhref + "---------");

//遍历左边导航的li

                    $('.omapp-menu').find('li').each(function () {

//遍历左边导航a标签的href

                        var objUrl = $(this).children("a").attr("href");

                        console.log(objUrl);

                        //var aa = viewTitle.indexOf(objUrl);

                        //console.log(aa);

//拿“遍历点击到内容里面的a标签的href”进行在字符串内进行检索

                        if (objhref.indexOf(objUrl) >= 0) {

//对应的添加名字

                            $(this).addClass("active");

//其他的删除名字

                            $(this).siblings().removeClass("active");

//返回顶部

                            $('body,html').animate({ scrollTop: 0 }, 500);

                        }

                    })

                })

            })

        })