整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
選項(xiàng)卡在js中是一個(gè)重要的知識(shí)點(diǎn)。他沒有那么難，但在工作中卻有重要的位置。幾乎在每一個(gè)網(wǎng)站都能看到選項(xiàng)卡的實(shí)例。所以今天寫一下選項(xiàng)卡的實(shí)現(xiàn)。我們?cè)O(shè)想有四個(gè)按鈕分別來控制四個(gè)盒子當(dāng)我們點(diǎn)擊當(dāng)前的按鈕的時(shí)候，讓對(duì)應(yīng)的盒子顯示，讓其余的盒子隱藏。
點(diǎn)擊選項(xiàng)后變換不同的內(nèi)容
第一部分
第二部分
謝謝。
項(xiàng)卡頁面設(shè)計(jì)的基本思路是將n個(gè)div內(nèi)容塊疊在相同的位置，然后通過JS控制每個(gè)div內(nèi)容塊的CSS屬性，實(shí)現(xiàn)需要內(nèi)容的顯示（其它塊的暫時(shí)隱藏）。
簡(jiǎn)單的效果演示所下：
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
<div id="mainx">
<div class="main"><!--2 main -->
<div class="left">
<div id="tab">
<h3 class="up" onclick="goto1(1);">知與行</h3>
<h3 onclick="goto1(2);">聽、講故事</h3>
<h3 onclick="goto1(3);">學(xué)習(xí)網(wǎng)站</h3>
<h3 onclick="goto1(4);">視頻網(wǎng)站</h3>
<h3 onclick="goto1(5);">15</h3>
<!--p11 start -->
<div class="block" id="c11">
<p> </p>
</div>
<!--p11 end -->
<!--p12 start -->
<div>
</div> <!--p12 end -->
<!--p13 start -->
<div>
<a >快樂學(xué)堂—小學(xué)生同步學(xué)習(xí)及親子教育的專業(yè)網(wǎng)站!</a>
</div>
<div>
<ul>
<li><a >文明之旅</a></li>
<li><a >開講了</a></li>
<li><a >百家講壇</a></li>
<li><a >讀書</a></li>
</ul>
</div>
#tab {
position:relative;
width:100%;/* 定義選項(xiàng)卡的整體寬度 */
height:208px;
clear:both;
}
#tab div {
position:absolute;
top:28px;
left:0px;
width:100%;
height:180px;
display:none;
}
#tab .block{
display:block;
padding-bottom:6px;
border-right: #eee 1px dashed;
}
#tab h3{
float:left;
width:18.95%;
height:1.625em;
margin:1px 0px;
line-height:1.625em;
font-size:1em;
font-weight:normal;
text-align:center;
color:#00007F;
background:#EEEEEE url(tab_bg.gif) no-repeat right top;
background-position:right;
cursor:url(zfirst/css/rose.ani);
display:block;
overflow:hidden;
margin-left:2px;
border-bottom:2px solid #ddd;
border-right:2px solid #ddd;
}
#tab .up {
background:#fff url(tab_up_bg.gif) no-repeat;
margin-left:2px;
border-top:2px solid #eee;
border-left:2px solid #eee;
border-right:2px solid #eee;
border-bottom:0px solid #fff
}
function goto1(ao){
var h=document.getElementById("tab").getElementsByTagName("h3");
var d=document.getElementById("tab").getElementsByTagName("div");
for(var i=0;i<10;i++){
if(ao-1==i){
h[i].className+=" up";
d[i].className+=" block";
}
else {
h[i].className=" ";
d[i].className=" ";
}}}
機(jī)端排版不佳，建議網(wǎng)頁瀏覽，為方便復(fù)制，用的代碼，就沒用截圖。
<script type="text/javascript">
$(function(){
$('#btns input').click(function(){
//this原生對(duì)象
//給當(dāng)前對(duì)象添加cur樣式，并把同級(jí)兄弟元素移除cur樣式
$(this).addClass('cur').siblings().removeClass('cur');
//$(this).index()獲取當(dāng)前按鈕所在層級(jí)范圍的索引值
$('#contentsdiv').eq($(this).index()).addClass('active').siblings().removeClass('active');
});
});
</script>
<script type="text/javascript">
window.onload = function(){
var aBtn = document.getElementById('btns').getElementsByTagName('input');
var aCon = document.getElementById('contents').getElementsByTagName('div');
for(var i=0;i<aBtn.length;i++){
//閉包，將一個(gè)變量長(zhǎng)期駐扎在內(nèi)存當(dāng)中，可用于循環(huán)中存索引值
(function(i){
aBtn[i].onclick = function(){
for(var j=0;j<aBtn.length;j++){
aBtn[j].className = '';
aCon[j].className = '';
}
this.className='cur';
//如果不用閉包，i的值始終是3
aCon[i].className = 'active';
}
})(i)
}
}
</script>
<style type="text/css">
.btns{
width:500px;
height: 50px;
}
.btns input{
width: 100px;
height: 50px;
background-color: #ddd;
color: #666;
border: 0px;
}
.btns input.cur{
background-color: gold;
}
.contents div{
width:500px;
height: 300px;
background-color: gold;
display: none;
line-height: 300px;
text-align: center;
font-size: 50px;
}
.contents div.active{
display: block;
}
</style>
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
