HBuilder:實現選項卡切換（帶切換效果）

效果

html

<!--選項卡-->
						<div id="tab">
							<!--選項卡名字-->
							<ul>
								<li class="off">物聯網</li>
								<li class="on">android</li>
								<li class="off">AR/VR</li>
							</ul>
							<div class="hide">
								<p>&nbsp&nbsp &nbsp&nbsp11111111RSA 的一個牛逼的特性是同態乘法。通常來講，如果你可以交換兩個操作的順序 這兩個操作是同態的。在同態加密中，這就是你可以對加密數據進行計算的一個屬性。完全同態加密是存在的，但是現在還沒有應用到實際中，它能夠對任何基於加密數據的程序完成計算。</p>
							</div>
							<!--初始化顯示中間選項卡-->
							<div class="show">
								<p>&nbsp&nbsp &nbsp&nbsp2222222222RSA 的一個牛逼的 換兩個操作的順序而不影響計算結果，那麼我們就說這兩個操作是同態的。在同態加密中，這就是你可以對加密數據進行計算的一個屬性。完全同態加密是存在的，但是現在還沒有應用到實際中，它能夠對任何基於加密數據的程序完成計算。</p>
							</div>
							<div class="hide">
								<p>&nbsp&nbsp &nbsp&nbsp33333333333RSA 的一個牛逼的特性是同態乘法。通常來 的順序而不影響計算結果，那麼我們就說這兩個操作是同態的。在同態加密中，這就是你可以對加密數據進行計算的一個屬性。完全同態加密是存在的，但是現在還沒有應用到實際中，它能夠對任何基於加密數據的程序完成計算。</p>
							</div>
						</div>

css

a {
 	text-decoration: none;
 	color: black;
 }
 
 a:hover {
 	text-decoration: none;
 	color: #336699;
 }
 
 #tab {
 	width: 100%;
 	padding: 5px;
 	height: 150px;
 	/*margin: 20px;*/
 }
 
 #tab ul {
 	list-style: none;
 	display:block ;
 	height: 30px;
 	line-height: 30px;
 	border-bottom: 2px #C88 solid;
 	
  
 	display: flex;
 	margin-right: 7px;
 }
 
 #tab ul li {
 	background: #FFF;
 	cursor: pointer;
 	float: left;
 	list-style: none height:50px;
 	line-height: 50px;
 	padding: 0px 10px;
 	margin: 0px 10px;
 	/*border: 1px solid #BBB;
 	border-bottom: 2px solid #C88;*/
 	
 	flex: 2;
 	width: 22%;
 	height: 50px;
 	font-size: 30px;
    text-align:center;
    border-radius: 10px;
 }
 
 #tab ul li.on {
 	/*border-top: 2px solid gray;
 	border-bottom: 2px solid #FFF;*/
 	background: gray;
 	color: whitesmoke;
 }
 
 #tab div {
 	height: 750px;
 	width: 90%;
 	border-top: none;
 	padding: 1px;
 	border: 1px solid #336699;
 	padding: 50px   10px 10px  10px;
 	margin: 0  auto;
 	font-size: 40px;
 	background: oldlace;
 	text-align: center; 	 
 	
 	background-color: rgba(0, 0, 0, 0.5);
 	/* IE9、標準瀏覽器、IE6和部分IE7內核的瀏覽器(如QQ瀏覽器)會讀懂 */
 }
 
 .hide {
 	display: none;   /*此元素不會被顯示*/
 }

js

// JS實現選項卡切換
window.onload = function() {
	var myTab = document.getElementById("tab"); //整個div
	var myUl = myTab.getElementsByTagName("ul")[0]; //一個節點
	var myLi = myUl.getElementsByTagName("li"); //數組
	var myDiv = myTab.getElementsByTagName("div"); //數組

	for(var i = 0; i < myLi.length; i++) {
		myLi[i].index = i;
		myLi[i].onclick = function() {
			for(var j = 0; j < myLi.length; j++) {
				myLi[j].className = "off";
				myDiv[j].className = "hide";
			}
			this.className = "on";
			myDiv[this.index].className = "show";
		}
	}
}