javascript scheduled automatic switching tab Tab_navigation menu-JS Tutorial-php.cn

javascript scheduled automatic switching tab Tab_navigation menu

WBOY

Release： 2016-05-16 18:44:23

Original

1344 people have browsed it

It should be noted here that the random number used to generate changeTabInterval prevents too many TabPane on the page. If the changeTabInterval is set to the same, it will produce a uniform switching effect, which is not beautiful.

<title>Automatically switch tabs</title>
<style> 
.tab { 
font-family: Verdana, Helvetica, Arial; 
font-size: 12px; 
position: relative; 
width: 100%; 
} 
.tab-border {border:1px solid;border-color: rgb(120,172,255);} 
.tab-head { 
background-color:rgb(234,242,255);; 
border:0px; 
height:23px; 
line-height:20px; 
position:relative; 
} 
.tab-head ul{ 
border:0px; 
height:23px; 
list-style:none; 
margin:0px; 
text-align:center; 
padding:0; 
position:absolute;

} 
.tab-head li{ 
border: 1px solid; 
border-color: rgb(120,172,255); 
border-left: 0; 
border-bottom: 0; 
border-top: 0; 
cursor:pointer; 
color:#416AA3; 
float:left; 
display:block; 
height:22px;!important;height:20px; 
line-height:20px; 
padding: 2px 6px 0px 6px; 
margin-top: 2px; 
margin-right: -1px; 
text-overflow:ellipsis; 
white-space:nowrap; 
overflow:hidden;

} 
.tab-head li.hover{ 
border: 1px solid rgb(120,172,255); 
border-bottom: 0; 
padding: 0px 6px 3px 6px; 
margin: 0px 1px 0px 0px; 
background: white; 
font-size: 13px; 
font-weight: bold; 
color: rgb(0,66,174); 
overflow:visible; 
} 
</style>
<div id="rptopmain_right_middle_right">

            <div id="divForumBoard">
                    </div>
<div id="divForumCast" style="padding:8px;height:200px">
                    <div class="rp_2equalcol">
<a href="#" target="_blank"></a> Hacker Zero Start Tutorial CHM</div>
<div class="rp_2equalcol">
<a href="#" target="_blank"></a>VB screen keyboard component that can encrypt and decrypt </div>
<div class="rp_2equalcol">
<a href="#" target="_blank"></a>What kind of project experience will make the interviewer shine</div>
<div class="rp_2equalcol">
<a href="#" target="_blank"></a>Super j2me flying game crazy thunder source code</div>
<div class="rp_2equalcol">
<a href="#" target="_blank"></a>VB screen keyboard component that can encrypt and decrypt </div>
<div class="rp_2equalcol">
<a href="#" target="_blank"></a>Some misunderstandings in programming learning</div>
</div>
                    <div id="divForumPanel" style="padding:8px;height:210px">
            <div class="rp_2equalcol">
<a href="#" target="_blank"></a>Delphi multi-document geometric drawing and editing program</div>
<div class="rp_2equalcol">
<a href="#" target="_blank"></a>Is it useful to learn ACM algorithm questions? </div>
<div class="rp_2equalcol">
<a href="#" target="_blank"></a> Hacker Zero Start Tutorial CHM</div>
<div class="rp_2equalcol">
<a href="#" target="_blank"></a>Super j2me flying game crazy thunder source code</div>
<div class="rp_2equalcol">
<a href="#" target="_blank"></a>B implements the main form to control the display and hiding of the secondary window </div>
<div class="rp_2equalcol">
<a href="#" target="_blank"></a>Delphi multi-document geometric drawing and editing program</div>
</div>
            </div>

[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute ]<script> var tp = new TabPane("divForumBoard",randint(3,10)); tp.addTabPage({title:"公告" ,width:50 ,panel:"divForumCast"}); tp.addTabPage({title:"面板" ,width:50 ,panel:"divForumPanel"}); </script>