.hgmap-li {
  text-align: center;
  margin-bottom: 30px;
}
.hgmap-li ul li {
  display: inline-block;
  padding: 0 27px;
  cursor: pointer;
  font-size: 16px;
}
.hgmap-li ul li:hover,
.hgmap-li ul li.show {
  color: #ff9906;
}
.qiehuan {display: none;}
.qiehuan.show {display:block;}

<div class="hgmap-li">
<ul>
<li class="show">全部</li>
<li>北京</li>
<li>成都</li>
<li>济南</li>
<li>杭州</li>
<li>绵阳</li>
<li>苏州</li>
</ul></div>

<div class="qiehuan show">1</div>
<div class="qiehuan">2</div>
<div class="qiehuan">3</div>
<div class="qiehuan">4</div>
<div class="qiehuan">5</div>
<div class="qiehuan">6</div>
<div class="qiehuan">7</div>

    $(function(){
        $(".hgmap-li li").each(function(index) {//遍历选项卡
            $(this).click(function() {//注册每个选项卡点击事件
                $(this).addClass('show').siblings().removeClass('show');//增加当前选中项样式
                //显示选项卡对应的内容并影藏不被选中的内容
                $(".qiehuan:eq("+index+")").addClass('show').siblings().removeClass('show');
            });
        });
  
  
    });