Web Front-end
JS Tutorial
Javascript tab switching principle and effect implementation method_javascript skills
Javascript tab switching principle and effect implementation method_javascript skills
May 16, 2016 pm 04:20 PMThe example in this article describes the principle and effect implementation method of javascript tab switching. Share it with everyone for your reference.
The specific implementation method is as follows:
<head>
<style type="text/css">
#container{border:solid 1px green;width:300px;height:300px;}
li{float:left;margin-left:20px;}
p{float:left;}
#sports,#military,#bbs{display:none;}
</style>
<script type="text/javascript">
function tab(pid){
var ps = ['news','sports','military','bbs'];
for(var i=0,len=ps.length;i<len;i ){
if(ps[i] == pid){
Document.getElementById(ps[i]).style.display = "block";
}else{
Document.getElementById(ps[i]).style.display = "none";
}
}
}
</script>
</head>
<body>
<div id="container">
<ul>
<li onmouseover="tab('news');">News</li>
<li onmouseover="tab('sports');">sports</li>
<li onmouseover="tab('military');">Military</li>
<li onmouseover="tab('bbs');">Forum</li>
</ul>
<p id="news">News News News News News</p>
<p id="sports">sports sports sports sports sports</p>
<p id="military">military military military military military</p>
<p id="bbs">Forum Forum Forum Forum Forum</p>
</div>
</body>
</html>
I hope this article will be helpful to everyone’s JavaScript programming design.
Hot Article
Hot tools Tags
Hot Article
Hot Article Tags
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Users encounter rare glitches: Samsung Watch smartwatches suddenly experience white screen issues
Apr 03, 2024 am 08:13 AM
Users encounter rare glitches: Samsung Watch smartwatches suddenly experience white screen issues
How to write a novel in the Tomato Free Novel app. Share the tutorial on how to write a novel in Tomato Novel.
Mar 28, 2024 pm 12:50 PM
How to write a novel in the Tomato Free Novel app. Share the tutorial on how to write a novel in Tomato Novel.
How to recover deleted contacts on WeChat (simple tutorial tells you how to recover deleted contacts)
May 01, 2024 pm 12:01 PM
How to recover deleted contacts on WeChat (simple tutorial tells you how to recover deleted contacts)
The secret of hatching mobile dragon eggs is revealed (step by step to teach you how to successfully hatch mobile dragon eggs)
May 04, 2024 pm 06:01 PM
The secret of hatching mobile dragon eggs is revealed (step by step to teach you how to successfully hatch mobile dragon eggs)
Kyushu Fengshen Assassin 4S Radiator Review Air-cooled 'Assassin Master' Style
Mar 28, 2024 am 11:11 AM
Kyushu Fengshen Assassin 4S Radiator Review Air-cooled 'Assassin Master' Style
How to set font size on mobile phone (easily adjust font size on mobile phone)
May 07, 2024 pm 03:34 PM
How to set font size on mobile phone (easily adjust font size on mobile phone)
The difference between Go language methods and functions and analysis of application scenarios
Apr 04, 2024 am 09:24 AM
The difference between Go language methods and functions and analysis of application scenarios
Exquisite light and shadow art in spring, Haqu H2 is the cost-effective choice
Apr 17, 2024 pm 05:07 PM
Exquisite light and shadow art in spring, Haqu H2 is the cost-effective choice
