真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們

 
  
品牌
   
    

     
大眾
    
   
  

js邏輯控制部分

①定義一個變量對象，存儲三個模塊中分別選擇的數(shù)據(jù)、定義hash值、相應(yīng)模塊的處理邏輯函數(shù)。

info={
      brand:'',
      carType:'',
      carSeries:'',
      pages:['Brand','Type','Series'] 
    };
info.selectBrand=function(){
   document.title = '選擇商標(biāo)';
   brandEvent();
}
//選擇車型
info.selectType=function(){
   document.title = '選擇車型';
   document.body.scrollTop = 0; //滾到頂部
    window.scrollTo(0, 0);
    typeEvent(); //為該模塊的dom綁定事件或做其他邏輯
}
//選擇車系
info.selectSeries=function(){
   document.title = '選擇車系';
   document.body.scrollTop = 0;
   window.scrollTo(0, 0);
   seriesEvent();
}

②dom綁定事件&其他邏輯

 function brandEvent(){
//綁定跳轉(zhuǎn)
  $('#Brand ul li').click(function(){
    info.brand=$(this).find('p').text();
    goPage('Type');
  })
 }
 function typeEvent(){
//綁定跳轉(zhuǎn)
  $('#Type dd').click(function(){
    info.carType=$(this).text();
    goPage('Series');
  })
 }
 function seriesEvent(){...}

③goPage邏輯跳轉(zhuǎn)控制

function goPage(tag) {
  if ((tag == 'Brand')&&(location.hash.indexOf('Type')!=-1)){ // 后退操作
      history.back();
      document.title = '選擇商標(biāo)'; 
  }else if ((tag == 'Type')&&(location.hash.indexOf('Series')!=-1)){
      history.back();
      document.title = '選擇車型';
  }else {
    location.hash = tag;
  }
}

④js入口文件（這里用了zepto.js來選擇dom）

window.onload=function(){
    info.selectBrand(); //為默認(rèn)顯示的模塊中的元素綁定相應(yīng)的事件及其他邏輯
    $(window).on("hashchange", function (e) {
      doHashChange();
    });
}

⑤最重要的hash改變邏輯控制

function doHashChange(){
  //獲取hash的值
  var hash = location.hash.split('|')[0],
    tag = hash.replace(/#/g, '');
  if (info.pages.indexOf(tag) == -1) {
    tag = 'Brand';
  }
  $('.wrap').children('div').hide();  
  //執(zhí)行每個模塊不同的方法
  if(typeof(info['select' + tag]) == "function"){
    info['select' + tag]();
  }
  //展示對應(yīng)dom
  $('#' + tag).show();
}

關(guān)于“如何使用原生js做單頁應(yīng)用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。