通用选项卡效果

<script>
function changeTab(changetab){
	var tabs=$(".navtab_sml").find("a");
	var cts=$(".navtab_sml_info > div");
    for(i=0;i<tabs.length;i++){
		if(tabs[i]==changetab){
			tabs[i].className="selected";
			cts[i].style.display="block";
		}else{
		   tabs[i].className="";
		   cts[i].style.display="none"; 
		}
	}
}
</script>
<div class="navtab_sml clearfix">
        <a class="selected" onClick="changeTab(this)">基本信息</a>
        <a onClick="changeTab(this)">资质审查</a>
        <a onClick="changeTab(this)">入场人员信息</a>
        <a onClick="changeTab(this)">入场人员管理-附件</a>
        <a onClick="changeTab(this)">入场人员管理-培训</a>
        <a onClick="changeTab(this)">入场条件审查</a>
        <a onClick="changeTab(this)">施工机具资料</a>
</div>
 <div class="navtab_sml_info">
      <div>基本信息内容</div>
      <div>资质审查内容</div>
      <div>入场人员信息内容</div>
      <div>入场人员管理-附件内容</div>
      <div>入场人员管理-培训内容</div>
      <div>入场条件审查内容</div>
      <div>施工机具资料内容</div>
 </div>
时间: 2024-08-27 06:52:46

通用选项卡效果的相关文章

CSS3及JS简单实现选项卡效果(适配手机端和pc端)

想要适配手机端和pc端,有几种简单的方法,本人使用的是百分比分配的方法. *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100%; overflow: hidden; } #bottom_box{ width: 100%; height: 50px; background-color: #eee; display: flex; //这是flex布局,父元素设置为flex,子元素设置几等份就是分成几等份 position:

语音导航的tab选项卡效果

前端开发whqet,csdn,王海庆,whqet,前端开发专家 ladies and 乡亲们,程序员同志们,周末仍然坚守工作岗位,或者学习不辍的童鞋们,福音来了. 语音识别高不高端.难不难? 今天给大家推荐一个简单易用的js实现的语音识别框架annyang,然后一个案例示范使用. 在线案例,下载收藏. annyang是一个能够实现语音识别的js类库,小巧易用(仅仅2k),兼容中文.接下来我们看看怎么使用. 首先导入该annyang库,可以使用CDN的方式,也可以下载来使用. <!--下载到本地使

ecshop 实现“精品、新品、热销”板块出现选项卡效果的方法

最近做一个网络商城,直接使用ecshop的免费模板,懒得重新做,ecshop建站多日了,一直想在主页的板块中建网页选项卡鼠标经过自动切换效果,百度搜索这方面的内容也没找到合适的,今天一实验,成功了,所以写出来供ecshop新手参考之用: 1.ecshop自带的选项卡效果(鼠标点击切换): 在后台设置商品分类时,勾选"设置为首页推荐:精品.最新.热门"的某一项后,相应的在首页的"精品.最新.热门"中就会出现"选项卡效果". 不过,默认的选项卡效果是

Javascript进阶篇——总结--DOM案例+选项卡效果

断断续续的把慕课的JavaScript基础和进阶看完了,期间不怎么应用有的都忘记了,接下来多开始写些效果,进行实际应用. 制作一个表格,显示班级的学生信息. 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮,能动态在最后添加一行 3. 点击删除按钮,则删除当前行 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title> new document </ti

javascript 一个页面多个tab选项卡效果

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>javascript 一个页面多个tab选项卡效果</title> <script> var tab=function(id,event){ var oDiv=document.getElementById(id); var oBtn=oDiv.getElementsByTagName(

当transition遇上display(选项卡效果)

下文转自http://www.cnblogs.com/ihardcoder/p/3859026.html 如demo(如果没有显示,请查看源地址http://jsfiddle.net/ihardcoder/HNduT/2/)所示,基本的效果是在点击"Translate"按钮后,蓝色区域透明度变为0,然后隐藏display:none:点击Reset按钮后,首先显示蓝色区域display:block,然后透明度逐渐恢复至1,代码如下: 复制代码 1 var btn1 = $("#

选项卡效果

例子一. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>选项卡效果</title> 6 <script type="text/javascript" src="jquery.min.js"></script> 7 <

WPF实现选项卡效果(1)——使用AvalonDock

简介 公司最近一个项目,软件采用WPF开发,需要实现类似于VS的选项卡(或者是浏览器的选项卡)效果.搜寻诸多资料后,发现很多同仁推荐AvalonDock这款开源控件.在其官方地址下载源码和Demo后,对其进行了初步的研究,初步实现了预期效果. AvalonDocking的结构树 在下载的Demo中,我们可以发现AvalonDock的可视化结构树如下: <avalon:DockingManager x:Name="dockingManager"> <avalon:Lay

iOS 选项卡效果实现

原文链接: iOS选项卡效果实现 简书主页:http://www.jianshu.com/users/37f2920f6848 Github主页:https://github.com/MajorLMJ iOS开发者公会-技术1群 QQ群号:87440292 iOS开发者公会-技术2群 QQ群号:232702419 iOS开发者公会-议事区   QQ群号:413102158