小小JS搞定导航条点击显示当前栏目CSS样式二级菜单

最新推荐文章于 2024-04-24 13:47:46 发布

xiaoyaoniu328

最新推荐文章于 2024-04-24 13:47:46 发布

阅读量5.3k

点赞数

分类专栏： js动态网站相关知识文章标签： css javascript class div url function

本文链接：https://blog.csdn.net/xiaoyaoniu328/article/details/6090799

版权

js动态网站相关知识专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近都在美化我的返现网站。所以经常要用到很多不同的效果来美化。同时要注重用户体验。所以最近找的都是这方面相关的。像导航呀，JS，tab切换等。呵。这几天就能做好了。到时大家支持一下！

WP好像是用PHP函数就能判断当前选择项目使用不同CSS样式。

 
   001<HTML> 
 
   002    <HEAD> 
 
   003          
 
   004<STYLE>
 
   005            body {
 
   006                font-size: 12px;
 
   007                font-family: '宋体';
 
   008            }
 
   009            ul.TabBarLevel1 {
 
   010                list-style: none;
 
   011                margin: 0;
 
   012                padding: 0;
 
   013                height: 29px;
 
   014                background-image: url(http://www.blueidea.com/articleimg/2006/04/3363/tabbar_level1_bk.gif);
 
   015            }
 
   016            ul.TabBarLevel1 li {
 
   017                float: left;
 
   018                padding: 0;
 
   019                height: 29px;
 
   020                margin-right: 1px;
 
   021                background: url(http://www.blueidea.com/articleimg/2006/04/3363/tabbar_level1_slice_left_bk.gif) left top no-repeat;
 
   022            }
 
   023            ul.TabBarLevel1 li a {
 
   024                display: block;
 
   025                line-height: 29px;
 
   026                padding: 0 20px;
 
   027                color: #333;
 
   028                background: url(http://www.blueidea.com/articleimg/2006/04/3363/tabbar_level1_slice_right_bk.gif) right top no-repeat;
 
   029                white-space: nowrap;
 
   030            }
 
   031            ul.TabBarLevel1 li.Selected {
 
   032                background: url(http://www.blueidea.com/articleimg/2006/04/3363/tabbar_level1_slice_selected_left_bk.gif) left top no-repeat;
 
   033            }
 
   034            ul.TabBarLevel1 li.Selected a {
 
   035                background: url(http://www.blueidea.com/articleimg/2006/04/3363/tabbar_level1_slice_selected_right_bk.gif) right top no-repeat;
 
   036            }
 
   037            ul.TabBarLevel1 li a:link, ul.TabBarLevel1 li a:visited {
 
   038                color: #333;
 
   039                text-decoration: none;
 
   040            }
 
   041            ul.TabBarLevel1 li a:hover, ul.TabBarLevel1 li a:active {
 
   042                color: #F30;
 
   043                text-decoration: underline;
 
   044            }
 
   045            ul.TabBarLevel1 li.Selected a:link, ul.TabBarLevel1 li.Selected a:visited {
 
   046                color: #000;
 
   047                text-decoration: none;
 
   048            }
 
   049            ul.TabBarLevel1 li.Selected a:hover, ul.TabBarLevel1 li.Selected a:active {
 
   050                color: #F30;
 
   051                text-decoration: underline;
 
   052            }
 
   053            div.HackBox {
 
   054                padding: 2px 2px;
 
   055                border-left: 2px solid #6697CD;
 
   056                border-right: 2px solid #6697CD;
 
   057                border-bottom: 2px solid #6697CD;
 
   058                display: none;
 
   059            }
 
   060        </STYLE> 
 
   061  
 
   062      
 
   063      
 
   064<DIV id=Whatever> 
 
   065<UL id=TabPage1 class=TabBarLevel1> 
 
   066<LI id=Tab1> 
 
   067                    <A onclick="javascript:switchTab('TabPage1','Tab1');" href="#">Linmoo简介</A> 
 
   068                </LI> 
 
   069<LI id=Tab2 class=Selected> 
 
   070                    <A onclick="javascript:switchTab('TabPage1','Tab2');" href="#">个人作品</A> 
 
   071                </LI> 
 
   072<LI id=Tab3> 
 
   073                    <A onclick="javascript:switchTab('TabPage1','Tab3');" href="#">Linmoo游记</A> 
 
   074                </LI> 
 
   075<LI id=Tab4> 
 
   076                    <A onclick="javascript:switchTab('TabPage1','Tab4');" href="#">留言簿</A> 
 
   077                </LI> 
 
   078</UL> 
 
   079<DIV id=cnt> 
 
   080<DIV id=dTab1 class=HackBox> 
 
   081                    出生    长大    学习    成长..... 
 
   082                </DIV> 
 
   083<DIV style="DISPLAY: block" id=dTab2 class=HackBox> 
 
   084                    个站   摄影   WEB   CODE 
 
   085                </DIV> 
 
   086<DIV id=dTab3 class=HackBox> 
 
   087                    第一次远行    天堂一样--西藏游记    彩云之南   异国风情 
 
   088                </DIV> 
 
   089<DIV id=dTab4 class=HackBox> 
 
   090                    I.路过,留言   II.表达景仰之意   III.索取LINMOO签名   IV.留言,留言..... 
 
   091                </DIV> 
 
   092</DIV> 
 
   093</DIV> 
 
   094  
 
   095        <SCRIPT language=JavaScript type=text/javascript>
 
   096            //Switch Tab Effect
 
   097            function switchTab(tabpage, tabid){
 
   098                var oItem = document.getElementById(tabpage);
 
   099                for (var i = 0; i < oItem.children.length; i++) {
 
   100                    var x = oItem.children(i);
 
   101                    x.className = "";
 
   102                    var y = x.getElementsByTagName('a');
 
   103                    y[0].style.color = "#333333";
 
   104                }
 
   105                document.getElementById(tabid).className = "Selected";
 
   106                var dvs = document.getElementById("cnt").getElementsByTagName("div");
 
   107                for (var i = 0; i < dvs.length; i++) {
 
   108                    if (dvs[i].id == ('d' + tabid)) dvs[i].style.display = 'block';
 
   109                    else dvs[i].style.display = 'none';
 
   110                }
 
   111            }
 
   112        </SCRIPT>

原文转自：http://dalianxxg.cn/it/web/2010/0411/609.html

xiaoyaoniu328

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小小JS搞定导航条点击显示当前栏目CSS样式二级菜单

<br />最近都在美化我的返现网站。所以经常要用到很多不同的效果来美化。同时要注重用户体验。所以最近找的都是这方面相关的。像导航呀，JS，tab切换等。呵。这几天就能做好了。到时大家支持一下！<br />WP好像是用PHP函数就能判断当前选择项目使用不同CSS样式。view sourceprint?001<HTML> 002 <HEAD> 003 004<STYLE>005 body {006 font-size: 12px;00
复制链接

扫一扫