Home > Article > Web Front-end > javascript scheduled automatic switching tab Tab_navigation menu

javascript scheduled automatic switching tab Tab_navigation menu

WBOYOriginal: 2016-05-16 18:44:231304browse

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>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js function for converting half-width and full-width to each other_javascript skillsNext article：js function for converting half-width and full-width to each other_javascript skills

See more

javascript scheduled automatic switching tab Tab_navigation menu

Related articles