实现移动端通过下拉菜单栏实现pc端的导航栏

export default function(){

//     var obj=document.getElementsByClassName('shogun-form-box-field');
//     console.log(obj[0]);
//     //序号，取当前选中选项的序号
//   var index=obj[0].selectedIndex; 
//   console.log(index);
//   var val = obj[0].options[index].text;
//   console.log(val);
$(function(){
//获取所以导航栏对应页面
let shogun=$('.shogun-tab-content')
let len1 =shogun.length;
//给div标签添上新的唯一class
for(let i=0;i<len1;i++){
$(shogun[i]).addClass("shogun-tab-content"+i);
}

let obj= $('.shogun-form-box-field')
//获取select标签
let obj1=obj[0];
let len=obj1.length;
//change事件是当select标签选择不同的option是会触发这个事件
$(obj1).change(function(){
//得到当前option的index值
let t = parseInt($(obj1).get(0).selectedIndex);
console.log(t);
//当选到当前的option时，其它隐藏，仅展示当前页面
for(let i= 1;i<len;i++){

        if(t==i){
        $('.shogun-tab-content').hide();
         $('.shogun-tab-content'+(t-1)).show();
 
        }
//当为第一个默认的时候，显示第一个页面即可
        if(t==0){
        $('.shogun-tab-content').hide()
        $('.shogun-tab-content0').show();
}
        }
      
})

})

}

这个功能就是实现移动端通过下拉菜单栏实现pc端的导航栏

pc：

 mobile：

 主要难点就是实现页面切换。