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：

主要難點就是實現頁面切換。