切换tab页，页面局部刷新，地址栏路径修改

• 需求：
  做一个类似百度这种，切换tab，页面展示局部刷新的效果。
  
  

---

• 思路：
  tab展示的切换，使用display控制。但是，如果页面刷新，则无法保留显示在tab2的效果，因而在地址栏加参数标记。但如果用a的href或者location.href 均会将整个页面刷新，体验很差，故需只修改地址栏路径，但不刷新页面。

---

• 解决方案：
  在切换tab时，
  先处理隐藏显示区域的内容，
  再将地址栏的内容改掉，如下：
  window.history.replaceState(null,null,'./tabDemo.html?tab=tab_a');

demo 核心js:

		$('.search_bar .search_tab').click(function(){
            $('.search_bar .search_tab').removeClass('active');
            $(this).addClass('active');
            if(this.id == 'tabB'){
                $('.contentA').hide();
                $('.contentB').show();  
                window.history.replaceState(null,null,'./tabDemo.html?tab=tab_b');      
            }else{
                $('.contentA').show();
                $('.contentB').hide(); 
                window.history.replaceState(null,null,'./tabDemo.html?tab=tab_a');
            }
        });

完整demo见：
https://download.csdn.net/download/dorothy1224/10786057

---

补充关于pushState 的知识：
history对象的方法。
history.pushState()：
history.pushState 方法接受三个参数，依次为：

• state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。
• title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
• url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。
  pushState方法不会触发页面刷新，只是导致history对象发生变化，地址栏会有反应。

history.replaceState()：
history.replaceState方法的参数与pushState方法一模一样，区别是它修改浏览历史中当前纪录。

关于pushState 可参考W3C的讲解，很清晰：
https://www.w3cschool.cn/javascript_guide/javascript_guide-uz9v269y.html