这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
在网站开发中尤其是新闻类网站,经常遇到多栏目切换的设计,这种效果有很多种实现效果,现在记录一种很简单的写法
在网站开发中尤其是新闻类网站,经常遇到多栏目切换的设计,这种效果有很多种实现效果,现在记录一种很简单的写法:
- <style>
- .news_wrap{
- width: 380px;
- height: 266px;
- float: left;
- margin-left: 15px;
- }
- .news_head{
- width: 380px;
- border-bottom: 2px solid #dedede;
- height: 51px;
- line-height: 51px;
- }
- .tabList ul li{
- float: left;
- cursor: pointer;
- font-weight: bold;
- text-align: center;
- font-size: 16px;
- width: 72px;
- }
- .cli1{
- color: #3a7aaf;
- border-bottom: 2px solid #3a7aaf;
- }
- .more{
- font-size: 14px;
- color: #9a9a9a;
- float: right;
- font-weight: normal;
- padding-right: 0;
- }
- .tabCon{
- width: 376px;
- padding-top: 13px;
- overflow: hidden;
- }
- </style>
- <div class="news_wrap">
- <div class="news_head">
- <div class="tabList">
- <ul>
- <li class="cli1" id="p1" onmouseover="return swap_tab(1)" >工作动态</li>
- <li class="cli2" id="p2" onmouseover="return swap_tab(2)" >媒体链接</li>
- <li class="cli2" id="p3" onmouseover="return swap_tab(3)" >领导活动</li>
- </ul>
- </div>
- <div class="more">
- <div id="j1">工作动态_more</div>
- <div id="j2" style="display:none;">媒体链接_more</div>
- <div id="j3" style="display:none;">领导活动_more </div>
- </div>
- </div>
- <div class="tabCon">
- <div id="n1">
- <li>工作动态_list</li>
- <li>工作动态_list</li>
- <li>工作动态_list</li>
- </div>
- <div id="n2" style="display:none;">
- <li>媒体链接_list </li>
- <li>媒体链接_list </li>
- <li>媒体链接_list </li>
- </div>
- <div id="n3" style="display:none;">
- <li>领导活动_list </li>
- <li>领导活动_list </li>
- <li>领导活动_list </li>
- </div>
- </div>
- </div>
- <script>
- function swap_tab(n){ //鼠标触发事件
- for(var i=1;i<4;i++){
- var curC=document.getElementById("n"+i);
- var curB=document.getElementById("p"+i);
- var mores = document.getElementById("j"+i);
- if(n==i){
- curC.style.display="block";
- curB.className="cli1";
- mores.style.display = "block";
- }
- else{
- curC.style.display="none";
- curB.className="cli2";
- mores.style.display = "none";
- }
- }
- }
- </script>
以上所述是小编给大家介绍的 JavaScript 实现多栏目切换效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0607/329668.html