版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_38341596/article/details/83213200
jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
<link href="css/container.css" rel="stylesheet" type="text/css">
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/screen.css" rel="stylesheet" type="text/css">
<script src="js/jquery.min.js">
</script>
<script src="js/tab.js">
</script>
</head>
<body>
<div class="container"> <!-- 设置整体框架 -->
<div class="left"> <!-- 设置浮动向左 -->
<div class="menu"> <!-- 设置导航栏li -->
<div class="menu_title">
企业简介
<br>
<span>Company profiles</span>
</div>
<ul id="tab"> <!-- 框架内部属性设置 -->
<li class="active" onclick="changeValue(this)">
<!-- 只有改变鼠标指示的图案，并无其他作用 -->
<a href="javascript:void(0)">企业概况</a>
</li>
<li onclick="changeValue(this)">
<a href="javascript:void(0)">企业认证</a>
</li>
<li onclick="changeValue(this)">
<a href="javascript:void(0)">123</a>
</li>
</ul>
</div>
</div>
<div class="right">
<div class="location">
<span>当前位置：<a
href="#">企业简介</a>
</span>
<div class="brief" id="b">
企业概况
</div>
</div>
<div style="font-size: 14px; margin-top: 53px; line-height: 36px;">
<div id="tab_con">
<div id="tab_con_1" class="active">
<br>
<p>
公司全称
</p>
<br>
<p>
吉林省明日科技有限公司
</p>
<br>
<p>
创立时间
</p>
<br>
<p>
吉林省明日科技有限公司（工商注册）创建成立于 1999 年 12 月
</p>
<br>
<p>
吉林省明日科技有限公司是一家以计算机软件和数字出版为核心的高科技企业，多年来始终致力于行业管理软件、数字化出版物等领域的实践，目前已和多家国内上市企业形成产品合作关系，公司的多款软件产品应用于国内的多家企业集团。明日科技拥有软件开发和项目实施方面的资深专家和学习型技术团队，利用积累的专业知识和经验，已开发数百种专业技术图书和数十种数字化学习产品，成为国内IT信息服务领域的知名品牌。
</p>
<br>
<p>
明日科技秉承坚韧、创新、博学、笃行的企业精神，一直致力于为用户提供功能完善、实用而又具有创新特性的专业产品。2010年1月，历经六年，近百人的专家团队的艰苦研发，明日科技在北京国际会展中心率先推出了国内第一套拥有完全自主知识产权的数字化学习软件—编程全能词典系列软件，创立了教育软件行业未来发展的崭新模式，使编程学习更轻松，更高效。
</p>
<br>
<p>
明日科技的产品和服务深得用户的信赖与赞誉。公司的多个图书品种被中国书刊协会评为优秀畅销书，多个图书产品版权输出到港台地区，获得热销，在行业内创立了良好的信誉，与人民邮电、电子工业出版社、清华大学等多家大型出版社形成了战略伙伴关系。
</p>
<br>
<p>
经过不断创新，明日科技成功开发出独具特色的创新型产品和行业知名品牌，形成企业四大系列支柱产品：
</p>
<br>
<p>
1、编程词典系列软件。近百位专家历时六年研发成功的全国首款数字化学习编程的教育软件。
</p>
<br>
<p>
2、IT词典系列软件。包含电脑知识入门、硬件维护、办公软件操作和图形图像在内的系列词典软件。
</p>
<br>
<p>
3、行业管理软件。专注于开发煤矿专业领域的信息化系统，开发了煤矿电话智能综合管理系统、瓦斯通风管理系统、基于图形拨测系统等10多种专业软件，应用于多家企业。
</p>
<br>
<p>
4、专业开发类编程图书。目前已出版专业开发类编程图书近300本，已成为国内最畅销的编程图书品牌。
</p>
<br>
<p>
目前，明日科技的用户人群已经超过1000万，伴随着国家数字化产业的飞速发展，依托庞大的用户资源，明日科技坚持 “一切以用户需求为核心，发展全方位的数字化学习服务支持平台”的发展战略，在发展原有的行业软件开发服务和IT教育出版基础上，正在全力开发数字化学习软件产品，打造全能互动数字平台。
</p>
<br>
<p>
明日科技将永葆创新激情，不断追求卓越，全力打造国内软件开发教育服务第一品牌，国内IT教育服务第一品牌，国内数字教育软件第一品牌和国内软件开发资源的最佳供应商，用实际行动迎接中国数字化产业的腾飞。
</p>
</div>
<!-- dis-n display:none; -->
<div id="tab_con_2" class="dis-n" style="text-align: center;">
<img src="img/architecture.png" alt="" style="margin: 2% 0;">
</div>
<div id="tab_con_3" class="dis-n" style="text-align: center;">
<p>123</p>
</div>
</div>
</div>
</div>
</div>
<!--//企业简介-->
<!--底部-->
<script>
tabs("#tab", "active", "#tab_con");
</script>
</body>
</html>
css
@charset "utf-8";
/* CSS Document */
img{
max-width:100%;
}
/*二级页样式*/
.second_banner{
text-align:center;
background:url(../img/bg2.jpg) repeat-x;
}
.second_banner_img{
width:1024px;
heigth:293px;
position:relative;
left:50%;
margin-left:-512px;
}
.container{
width:1024px;
position:relative;
left:50%; /*设置框架*/
margin-left:-512px;
margin-top:35px;
overflow: hidden;
/*
overflow: 属性规定当内容溢出元素框时发生的事情。
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
*/
}
.left{
float:left;
}
.menu_title{
width:145px;
height:55px;
border-bottom:1px solid #ccc;
color:#2166a9;
font-size:24px;
background:url(../img/icon.png) no-repeat 10px;
padding-left:42px;
}
.menu li{
width:187px;
border-bottom:1px solid #ccc;
line-height:42px;
text-align:center;
vertical-align:middle;
}
.menu li a{
color:#333;
font-size:16px;
display:block;
}
.menu li a:hover{
background:#2166a9;
color:#fff;
}
js
//tabs("#tab", "active", "#tab_con");
function tabs(tabTit,on,tabCon){
$(tabCon).each(function(){
$(this).children().eq(0).show();
});
$(tabTit).each(function(){
$(this).children().eq(0).addClass(on);
});
$(tabTit).children().click(function(){
$(this).addClass(on).siblings().removeClass(on);
var index = $(tabTit).children().index(this);
$(tabCon).children().eq(index).show().siblings().hide();
});
}
function changeValue(ele){
//alert(ele.innerHTML);
document.getElementById("a").innerHTML = ele.innerHTML;
document.getElementById("b").innerHTML = ele.innerHTML;
}