移動端左右滑動導航
移動端項目中，當導航欄目多的時候，需要左右滑動，且隱藏橫向滾動條
純css即可實現此效果
<div class="menu-outer">
<ul class="menu">
<li><a href="javascript:void(0);">15天預報</a></li>
<li><a href="javascript:void(0);">逐小時預報</a></li>
<li><a href="javascript:void(0);">長期預報</a></li>
<li><a href="javascript:void(0);">當前天氣</a></li>
<li><a href="javascript:void(0);">AQI預報</a></li>
<li><a href="javascript:void(0);">AQI逐小時</a></li>
<li><a href="javascript:void(0);">AQI城市排名</a></li>
<li><a href="javascript:void(0);">天氣指數</a></li>
<li><a href="javascript:void(0);">台風路徑</a></li>
<li><a href="javascript:void(0);">天氣要聞</a></li>
</ul>
</div>
-------------------------------------------------
/*各個部分樣式*/
@charset "utf-8";
.menu-outer{
height: 1.8rem;
overflow: hidden;//父元素設置固定高度，小於子元素高度，超出隱藏滾動條
}
.menu{
width: 100%;
overflow: auto;
margin: 0 auto;
height: 120%;//子元素ul的高度超出父元素，由於父元素設置hidden,則隱藏了滾動時候的橫向滾動條了
white-space: nowrap;
}
.menu>li{
width: auto;
display: inline-block;
margin: 0 0.3rem;
}
.menu>li>a{
color: #000;
font-size: 0.85rem;
}
=============================
參考鏈接下載地址：https://files.cnblogs.com/files/leshao/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%AF%BC%E8%88%AA.rar
===========20181117更新============
如果需要點擊當前，當前聚焦顯示下划線，則使用下面的版本
------------------
參考下載鏈接地址：https://files.cnblogs.com/files/leshao/%E6%A8%AA%E5%90%91%E5%AF%BC%E8%88%AA%E4%B8%8B%E5%88%92%E7%BA%BF.rar
======================2018.11.08日更新============================
這個時候，使用上面的demo來開發項目
項目中，設置了html{overflow-flow:hidden;}
導致上面demo不可以使用，新開發一個版本
------------------------------------
<!--container一級導航-->
<div class="container">
<nav class="nav">
<p class="con">
<a href="javascript:void(0);">導航菜單</a>
<a href="javascript:void(0);">導航菜單</a>
<a href="javascript:void(0);">導航菜單</a>
<a href="javascript:void(0);">導航菜單</a>
<a href="javascript:void(0);">導航菜單</a>
<a href="javascript:void(0);">導航菜單</a>
<a href="javascript:void(0);">導航菜單</a>
<a href="javascript:void(0);">導航菜單</a>
<a href="javascript:void(0);">導航菜單</a>
<a href="javascript:void(0);">導航菜單</a>
</p>
</nav>
</div>
<!--container一級導航-->
---------------------------------------
/*各個部分樣式*/
@charset "utf-8";
html {
overflow-x: hidden;
}
.container {
height: 1rem;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
}
.nav {
height: 100%;
overflow-x: scroll;
overflow-y: hidden;
/*解決ios上滑動不流暢*/
-webkit-overflow-scrolling: touch;
}
.con {
width: 219%;
height: 100%;
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
border-bottom: 2px #ccc solid;
}
.con>a {
text-align: center;
width: auto;
color: #000;
display: inline-block;
margin: 0 0.12rem;
font-size: 0.32rem;
line-height: 0.99rem;
height: 0.99rem;
}
.con>a.active {
border-bottom: 2px rgb(255, 123, 0) solid;
color: rgb(255, 123, 0);
}
.container ::-webkit-scrollbar {
display: none;
}
----------------------------------------------
<script type="text/javascript">
$(document).ready(function() {
$(".con").find("a:first-child").addClass("active");
$(".con>a").each(function(i) {
$(this).click(function() {
$(this).addClass("active").siblings().removeClass("active");
});
});
});
</script>
==========================================
下載地址：https://files.cnblogs.com/files/leshao/%E7%9B%92%E6%A8%A1%E5%9E%8B%E5%AE%9E%E7%8E%B0%E5%AF%BC%E8%88%AA.rar
此模板參考鏈接：https://www.jianshu.com/p/f282b1cc24fb
======================20181109繼續更新==============================
項目中使用的是jsp開發的，導航作為一個單獨的nav.jsp來使用，需要的頁面include進去
導航跳轉頁面，通過a href來實現
現在要實現，點擊菜單，跳轉頁面之后，當前菜單聚焦高亮 顯示
=====================================
<div class="container">
<nav class="nav">
<p class="con">
<a href="a.html?currentIndex=0">00000</a>
<a href="b.html?currentIndex=1">11111</a>
<a href="c.html?currentIndex=2">22222</a>
<a href="d.html?currentIndex=3">33333</a>
<a href="e.html?currentIndex=4">44444</a>
<a href="f.html?currentIndex=5">55555</a>
<a href="j.html?currentIndex=6">66666</a>
<a href="h.html?currentIndex=7">77777</a>
<a href="i.html?currentIndex=8">88888</a>
<a href="k.html?currentIndex=9">99999</a>
</p>
</nav>
</div>
---------------------------------------------------------
<script type="text/javascript">
function getUrlParam(paramName) {
//var params = location.href.substr(1).split('&');
var params = location.search.substr(1).split('&');
var result = null;
for (var i = 0; i < params.length; i++) {
var aParam = params[i].split('=');
if (aParam[0] == paramName) {
result = aParam[1];
break;
}
}
return result
}
$(document).ready(function() {
var currentIndex = 0;
currentIndex = getUrlParam('currentIndex')
$(".con a").eq(currentIndex).addClass("active");
$(".con a").click(function(i) {
$(this).addClass("active").siblings().removeClass("active");
});
});
</script>
=======================
下載地址：https://files.cnblogs.com/files/leshao/%E7%82%B9%E5%87%BB%E8%B7%B3%E8%BD%AC%E9%A1%B5%E9%9D%A2%E8%81%9A%E7%84%A6.rar
=============================================================================================================
---------------------------------------------------------------------20181112更新-----------------------------------------------------------------------
繼續上個問題，進階。
要實現：移動端導航，左右滑動，且通過a標簽跳轉鏈接頁面，且聚焦的導航，點擊跳轉之后，高亮顯示，在可視區域。
----------------------------
結構 樣式都同步上次的
現在修改了下jq
思路：獲取一下高亮的選項寬度＋它距左邊的距離－屏幕的寬度的，得出來的值就是向左滾動的距離
下面代碼里面的：addedValue可以自己隨便定值。方便顯示出下一個菜單
跳轉的話，就是默認執行curItem這個函數。告訴它當前高亮的index值
---------------------------------------
$(document).ready(function() {
curItem(getUrlParam("currentIndex"))
});
function curItem(index) {
if(index === -1) {
return
}
var curDOM = $(".con a").eq(index), // 當前的a DOM元素
viewDOM = $(".nav"), // 視圖 DOM元素
viewWidth = viewDOM.width(), // 視圖寬度
leftRange = curDOM.offset().left, // 當前的a DOM元素距離視圖DOM最左邊的距離
addedValue = 100; // 附加值，自己定義。主要為了在滾動后，顯示出后面的菜單
if(leftRange + curDOM.width() + addedValue > viewWidth) {
// 如果當前的 A DOM元素距離左邊的距離，大於視圖寬度，說明是看不到的狀態
viewDOM.scrollLeft(viewDOM.scrollLeft() + (leftRange + curDOM.width() - viewWidth + addedValue))
} else if(leftRange - curDOM.width() < viewDOM.scrollLeft()) {
// 如果當前的 A DOM元素距離左邊的距離，小於視圖scrollLeft的值，說明是看不到的狀態
viewDOM.scrollLeft(viewDOM.scrollLeft() + leftRange - addedValue)
}
curDOM.addClass("active").siblings().removeClass("active");
}
----------------------------------------------
下載鏈接地址：https://files.cnblogs.com/files/leshao/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%AF%BC%E8%88%AA%E8%B7%B3%E8%BD%AC%E8%81%9A%E7%84%A6%E6%BB%91%E5%8A%A8.rar
感謝 華仔 得以完善，哈