整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
航切換設計到CSS中標簽屬性設置：隱藏、顯示
涉及html5異步傳輸的特性
更需要知道js多標簽時候元素選擇的寫法
再啰嗦一下：classLIst屬性返回元素的類名，可以用方法add()、remove()添加class屬性
setAttribute(name,value)設置新屬性及其值，或者修改已有屬性的值
正文
上導航切換的示意圖
js代碼：
<script>
window.onload=function () { //window.onload:就是等整個頁面內容全部加載完畢
//填寫js邏輯
//獲取ul里li的個數
var tab_ui=document.getElementsByTagName("ul");
var tab_li=tab_ui[0].getElementsByTagName("li")
//獲取要顯示的div的個數
var content=document.getElementById("content");
var content_div=content.getElementsByTagName("div");
//給li添加鼠標點擊事件
for(var i=0;i<tab_li.length;i++){
tab_li[i].index=i; //異步傳輸，不設置的話，得到的都是i的最大值
tab_li[i].onclick=function () {
//清除之前的樣式
for(var j=0;j<tab_li.length;j++){
//沒有點擊事件，j=0,1,2
tab_li[j].classList.remove("active");
content_div[j].setAttribute("class","hidden");
}
//設置自己本身的樣式:添加class=active
this.setAttribute("class","active");
//content_div[i].classList.remove("hidden"); 無效，i=3導致
//將對應的內容顯示出來
content_div[this.index].classList.remove("hidden");
}
}
//給li添加鼠標點擊事件
var tab_ui=document.getElementsByTagName("ul");
var tab_li1=tab_ui[1].getElementsByTagName("li")
//var tab_li1=document.getElementsById("li")
var content1=document.getElementById("content1");
var content1_div=content1.getElementsByTagName("div");
for(var i=0;i<tab_li1.length;i++){
tab_li1[i].index=i; //重點，為了讓i在循環體內
tab_li1[i].onmouseover=function () {
//這里的i永遠=3，如果不設置 tab_li[i].index=i
//清除之前的樣式
for(var j=0;j<tab_li1.length;j++){
//沒有點擊事件，j=0,1,2
tab_li1[j].classList.remove("active");
content1_div[j].setAttribute("class","hidden");
}
//設置自己本身的樣式:添加class=active
this.setAttribute("class","active");
//content_div[i].classList.remove("hidden"); 無效，i=3導致
//將對應的內容顯示出來
content1_div[this.index].classList.remove("hidden");
}
}
}
</script>
css代碼
<style>
.hidden{
display: none;
}
.tabdemo>.active{
background: red;
border-bottom-color:white ;
}
#wrap{
height: 58px;
background-color: #c7eafa;
}
.tabdemo {
width: 100%;
list-style: none;
margin: 0 auto;
background-color: blue;
}
.tabdemo1 {
width: auto;
list-style: none;
margin: 0 auto;
background-color: pink;
float:left;
}
li{
color: rgb(0, 0, 0);
display:inline-block;
}
ul.tabdemo1 li {
color: rgb(224, 9, 9);
display:block;
}
li:hover{
background-color: lavender;
}
a{
/*
一定注意要把a轉成行內塊元素，
如果轉的是塊元素那么短豎線會掉下去，
因為塊級元素是獨占一行的
*/
display:inline-block;
padding: 0 20px;
line-height: 58px;
text-decoration: none;
color: black;
}
</style>
html代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多導航切換</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
//js代碼、css代碼放在這里
<body>
<div id="wrap">
<div>
<ul class="tabdemo">
<li class="active "><a class="ac" href="#">選擇1</a></li>
<li><a class="ac" href="#">選擇2</a></li>
<li><a class="ac" href="#">選擇3</a></li>
</ul>
</div>
<!--彈出內容-->
<div id="content" style="padding:1px;border:dashed;">
<div id="first" class="show">
<a href="#">內容一</a>
<a href="#">內容一</a>
<a href="#">內容一</a>
<a href="#">內容一</a>
</div>
<div id="second" class="hidden">
<a href="#">內容二</a>
<a href="#">內容二</a>
<a href="#">內容二</a>
<a href="#">內容二</a>
</div>
<div id="third" class="hidden">
<a href="#">內容三</a>
<a href="#">內容三</a>
<a href="#">內容三</a>
<a href="#">內容三</a>
</div>
</div>
<!--彈出內容-->
<div>
<ul class="tabdemo1">
<li class="active "><a class="ac" href="#">選擇1</a></li>
<li><a class="ac" href="#">選擇2</a></li>
<li><a class="ac" href="#">選擇3</a></li>
</ul>
</div>
<div id="content1" style="padding:1px;border:dashed;">
<div id="first" class="show">
<a href="#">內容一</a>
<a href="#">內容一</a>
<a href="#">內容一</a>
<a href="#">內容一</a>
</div>
<div id="second" class="hidden">
<a href="#">內容二</a>
<a href="#">內容二</a>
<a href="#">內容二</a>
<a href="#">內容二</a>
</div>
<div id="third" class="hidden">
<a href="#">內容三</a>
<a href="#">內容三</a>
<a href="#">內容三</a>
<a href="#">內容三</a>
</div>
</div>
</div>
</body>
</html>
家好
這里是有新媒之聲給大家帶來的html5教程
話不多說直接看效果圖
首先我們先創建一個html
我們再建一個存放視頻背景的文件夾video
我們給建好的html寫入基本代碼
然后我們再把作為背景網站的視頻拷貝到video這個文件夾下
我們在給剛剛建好的html寫入視頻代碼
效果如下
并未網頁全屏，而且視頻重復播放
別急現在我們給視頻添加樣式，使它成為名副其實的視頻背景
我們給視頻代碼寫一個class="index-video"
我們在head頭寫上css樣式
我們現在再來看看效果
現在網頁視頻是以全屏播放并且你可以在上面寫上其它的效果，比如說導航欄之類的，因為現在視頻已經成為了我們網頁的背景。
現在我們在head加上跳轉代碼
現在就讓我們回顧一下需要用到那些代碼和注意的要去
body體里
<body>
<!--autoplay 屬性設置或返回音視頻是否在加載后即開始播放-->
<!--true - 指示音視頻在加載完成后隨即播放-->
<!--false - 默認。指示音視頻不應在加載后立即播放。-->
<!--loop:意思是否在網頁里加入背景音樂-->
<!--loop=-1就是表示你的背景音樂的循環次數是無限次，直到你關閉網頁-->
<video class="index-video" src="video/logo.mp4" autoplay="true" loop="-1"></video>
</body>
css樣式
<style type="text/css">
.index-video {
position: fixed; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto;
height: auto;
z-index: -100;
}
</style>
跳轉代碼
<!--http-equiv顧名思義，相當于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值。-->
<!--meat標簽的http-equiv屬性語法格式是：＜meta http-equiv="參數" content="為跳轉時間+跳轉網址"content="8;url=http://www.baidu.com"＞//為八秒后跳轉到百度網站-->
<meta http-equiv="refresh" content="8;url=http://www.baidu.com" />
<meta charset="utf-8">//網站編碼utf-8為通用的國際代碼
<meta http-equiv="refresh" content="8;url=http://www.baidu.com" />
//<!--meat標簽的http-equiv屬性語法格式是：＜meta http-equiv="參數" content="為跳轉時間+跳轉網址"content="8;url=http://www.baidu.com"＞//為八秒后跳轉到百度網站-->
<title>炫酷跳轉演示站</title>//為網頁標題
position 屬性規定元素的定位類型。
position語法：
position : static absolute relative
position參數：
static : 無特殊定位，對象遵循HTML定位規則
absolute : 將對象從文檔流中拖出，使用left，right，top，bottom等屬性進行絕對定位。而其層疊通過css z-index屬性定義。此時對象不具有邊距，但仍有補白和邊框
relative : 對象不可層疊，但將依據left，right，top，bottom等屬性在正常文檔流中偏移位置
position說明：
設置對象的定位方式，可以讓布局層容易位置絕對定位，控制盒子對象更加準確。
min-width: 最小寬度; min-height: 最小高度;
width: auto;//寬度為自動
height: auto;//高度為自動
z-index: -100;
//當你定義的CSS中有position屬性值為absolute、relative或fixed，
用z-index此取值方可生效。
此屬性參數值越大，則被層疊在最上面。
完整代碼
如果你的項目需要同時在android與ios上上架，為了避免開發2套代碼，我個人認為采用h5處理一些不影響性能的業務邏輯是個不錯的選擇（當然你也可以采用其他技術，比如reactNative或c等等）
比如我的app內部包含了部分h5寫的幫助說明，我把h5的內容存放在項目對應的assets目錄。
原本加載h5沒有調用setWebViewClient方法，代碼如下圖：
這個時候發現一個問題，啟動應用后加載h5正常，但是在點擊頁面跳轉是會自動的打開了系統內置的瀏覽器，而且這時候系統內置的瀏覽器根本訪問不了我們的apk內部的h5代碼，解決這個問題需要為webview設置WebViewClient，并重寫重寫WebViewClient的shouldOverrideUrlLoading方法返回true，這樣新的連接就會在當前WebView中打開。
修改后的代碼其實就是添加對setWebViewClient調用，并重寫shouldOverrideUrlLoading方法，注意要返回true,代碼如下
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
