利用css和js实现页面的标签效果。(标签个数可以动态变化)

利用css和js实现页面的标签效果

css

<style>
.menu{  margin-bottom:-15px;width: 800px;
}
.menu li{  display:block;  float: left; font-weight: bold;font-size: 12px; padding: 2px 0;  width:120px;  text-align: center;  cursor:pointer;  background: #A9A9A9;  border-top:1px solid #FFFFFF;border-left:1px solid #FFFFFF;border-right:1px solid #FFFFFF;
}
.menu li.hover{  background: #FFFFFF;  border-top:1px solid #A9A9A9;border-bottom;1px solid #A9A9A9;border-left:1px solid #A9A9A9;border-right:1px solid #A9A9A9;
}
#menuContent ul{  display: none;
}
#menuContent ul.block{  display: block;
}
</style>

说明：

这里的初期化函数看起来比较复杂，实际上是为了动态控制显示标签而设计的。

当第一个标签不显示时，第二个标签的初始状态就为动作不可。

<script type="text/javascript" src="./jquery-1.8.js"></script>
<script>
$(document).ready(function(){  iniKindTab();
});function iniKindTab(){// JS操作的数据存在的情况下if(document.getElementById("mainMenu")!=null){  // Tab内容的初期胡处理var dtiComShopAndWallet=document.getElementById("mainMenu").getElementsByTagName("li");  // var dliComShopAndWallet=document.getElementById("mainMenuContent").getElementsByTagName("ul");  // 有三个Tab，有的Tab可能不显示，第一个被显示的Tab的位置（三个Tab，索引分别为0,1,2）// 默认第一个Tab一开始就被显示var indexShowTab = 0;var indexShowTabflg = true;for(i=0;i<dtiComShopAndWallet.length;i++){  if(indexShowTabflg){if(dtiComShopAndWallet[i].style.display!='none'){indexShowTab = i;indexShowTabflg = false;}}dtiComShopAndWallet[i].className="";  dliComShopAndWallet[i].style.display="none";} // 显示在第一个位置的tab是不能点击的dtiComShopAndWallet[indexShowTab].className="hover";// 显示位置开始的Tab中向对应的内容dliComShopAndWallet[indexShowTab].style.display="block";}}function setTab(menu,index){  var menu=document.getElementById("mainMenu").getElementsByTagName("li");  var menuContent=document.getElementById("mainMenuContent").getElementsByTagName("ul");  for(i=0;i<menu.length;i++){  menu[i].className=i==index?"hover":"";  menuContent[i].style.display=i==index?"block":"none";  }  }
</script>

HTML

<div id="tabs1">  <ul class="menu" id="mainMenu">  <li οnclick="setTab(mainMenu,0)" class="hover">Tab1</li><li οnclick="setTab(mainMenu,1)" class="hover">Tab2</li><li οnclick="setTab(mainMenu,2)" class="hover">Tab3</li><li οnclick="setTab(mainMenu,3)" class="hover">Tab4</li> <li οnclick="setTab(mainMenu,4)" class="hover">Tab5</li>          </ul>
<BR>
<BR><div class="menuContent " id="mainMenuContent"><ul>标签1中的内容</ul><ul>标签2中的内容</ul><ul>标签3中的内容</ul><ul>标签4中的内容</ul><ul>标签5中的内容</ul></div>
</div>

通过以上代码实现。

总结：

通过这种方式实现的好处是标签的个数可以动态的变化。

利用css和js实现页面的标签效果。(标签个数可以动态变化)相关推荐

应用css div进行页面布局设计,利用CSS与DIV进行页面布局.ppt
<利用CSS与DIV进行页面布局.ppt>由会员分享,可在线阅读,更多相关<利用CSS与DIV进行页面布局.ppt(6页珍藏版)>请在人人文库网上搜索. 1.利用CSS与DIV ...
css画钟表_利用css+原生js制作简单的钟表
利用css+原生js制作简单的钟表.效果如下所示实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
html背景自动切换带滚动,利用CSS固定背景交替实现视差滚动效果
利用CSS固定背景交替实现视差滚动效果 Sponsor 视差滚动效果的网页设计案例我们分享过很多,实现这个功能一般都需要JS,而且比较复杂.没关系,今天设计达人网小编向大家介绍另外一种简单的视差效果技 ...
html，css，js简单介绍，html常用标签
目录简单介绍 HTML常用标签 1.html骨架标签 2.标题标签 3.段落标签 4.换行标签 5.文本格式化标签 6.div标签,span标签和pre标签 7.图像标签 8.超链接标签 9.注释标 ...
Animate.css+wow.js实现页面滚动到可视区显示动画效果
今天看迅雷官网 https://www.xunlei.com/v2018/dist/aboutus.html 实现的滚动到可视区域后显示动画,自己之前没做过这种,非常感兴趣,然后问小伙伴, 大部分都没 ...
HTML、CSS、JS实现轮播图效果:包含分页按钮及切换箭头
HTML页面: 页面布局 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
HTML、CSS、JS简单介绍以及HTML的标签
目录一.HTML--结构 1.了解网页 2.了解HTML 二.CSS--样式 1.CSS-网页的美容师 2.CSS 的规则 3.CSS的格式三.JavaScript--行为 1.JavaScrip ...
利用CSS和JS实现抖音超火3d照片墙
废话不多说,直接上代码: <!DOCTYPE html> <html lang="en" ondragstart="return false" ...
html音乐播放器利用css和js知识来创建一个音乐播放器（虽然简陋，但是逻辑很容易懂，适合初学者）
作为初学者,制作一个网页播放器来提高我们编写代码水平很有用这是css部分,很简单,随便信息样式就行 .musicDiv{width: 250px;height: 70px;background-co ...

利用css和js实现页面的标签效果。(标签个数可以动态变化)

利用css和js实现页面的标签效果。(标签个数可以动态变化)相关推荐

最新文章

热门文章