javascript 代码如下，初学写的很繁琐，求简化

sinat_31502449 2015-10-22 01:29:57
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>服务内容</title>
<style type="text/css">
ul,li {list-style: none; margin: 0px; padding: 0px;}
.content{width:1200px; margin:0 auto; font-family:"微软雅黑",Arial,Helvetica,sans-serif;}
.svcontent{width: 278px; float:left; margin-right: 20px;}
.cl{border: 1px solid #ccc;border-bottom: none;}
.svtitle{background:url(images/dot.jpg) repeat-x; height: 40px; line-height:40px; text-indent: 14px; }
.classify li a{display: block; text-decoration: none; color: black; border-bottom: 1px solid #ccc; font-size:14px; padding:5px 0px; text-indent: 10px; }
a:hover{background: #fffcd5;}
.svmessage{width:900px; float: left; position: relative;}
.lt{position: absolute; top: 0px; left: 0px; display:none;}
/*-----*/
.customerService{width:278px;height: 260px; margin-top:20px; border: 1px #cecece solid;}
.cstitle{font-family:"微软雅黑",Arial,Helvetica,sans-serif; font-size: 14px; font-weight: bold;height:40px; line-height:40px; background: url(images/jh.jpg)#eeeced 5px 15px no-repeat; text-indent: 30px;}
.worker p a{font-size: 10px; padding:10px 30px; background:url(images/qq.gif) 5px 5px no-repeat; height: 20px; line-height: 20px; text-decoration: none; color: #000;}
.time{
height: 60px; border-bottom: 1px dashed #ccc; border-top: 1px dashed #ccc;
}
.ttitle{ background: url(images/clock.png)2px 2px no-repeat; text-indent: 30px; height:30px; line-height: 30px; font-size: 15px; font-weight: bold;}
.time p{font-size: 10px; text-indent: 2px;}
.line{
height: 60px; }
.ltitle{ background: url(images/weixin.png)2px 2px no-repeat; text-indent: 30px; height:30px; line-height: 30px; font-size: 15px; font-weight: bold;}
.line p{font-size: 10px; text-indent: 2px;}
.svmtitle{font-size: 20px; text-align: center;}
</style>
<script type="text/javascript">
function logo(){
var ltt = document.getElementById("sign");
ltt.style.display="none";
var vi = document.getElementById("vi");
vi.style.display="none";
var packing = document.getElementById("packing");
packing.style.display="none";
var album = document.getElementById("album");
album.style.display="none";
var poster = document.getElementById("poster");
poster.style.display="none";
var lt = document.getElementById("logo");
lt.style.display="block";
}
function sign(){
var lt = document.getElementById("logo");
lt.style.display="none";
var vi = document.getElementById("vi");
vi.style.display="none";
var packing = document.getElementById("packing");
packing.style.display="none";
var album = document.getElementById("album");
album.style.display="none";
var poster = document.getElementById("poster");
poster.style.display="none";
var ltt = document.getElementById("sign");
ltt.style.display="block";
}
function vi(){
var lt = document.getElementById("logo");
lt.style.display="none";
var ltt = document.getElementById("sign");
ltt.style.display="none";
var packing = document.getElementById("packing");
packing.style.display="none";
var album = document.getElementById("album");
album.style.display="none";
var poster = document.getElementById("poster");
poster.style.display="none";
var vi = document.getElementById("vi");
vi.style.display="block";
}
function packing(){
var lt = document.getElementById("logo");
lt.style.display="none";
var ltt = document.getElementById("sign");
ltt.style.display="none";
var vi = document.getElementById("vi");
vi.style.display="none";
var album = document.getElementById("album");
album.style.display="none";
var poster = document.getElementById("poster");
poster.style.display="none";
var packing = document.getElementById("packing");
packing.style.display="block";

}
function album(){
var lt = document.getElementById("logo");
lt.style.display="none";
var ltt = document.getElementById("sign");
ltt.style.display="none";
var vi = document.getElementById("vi");
vi.style.display="none";
var packing = document.getElementById("packing");
packing.style.display="none";
var poster = document.getElementById("poster");
poster.style.display="none";
var album = document.getElementById("album");
album.style.display="block";
}
function poster(){
var lt = document.getElementById("logo");
lt.style.display="none";
var ltt = document.getElementById("sign");
ltt.style.display="none";
var vi = document.getElementById("vi");
vi.style.display="none";
var packing = document.getElementById("packing");
packing.style.display="none";
var album = document.getElementById("album");
album.style.display="none";
var poster = document.getElementById("poster");
poster.style.display="block";
}
</script>
</head>
<body>
<div class="content">
<div class="svcontent">
<div class="cl">
<div class="svtitle">产品分类</div>
<ul class="classify">
<li><a onclick="logo()">logo设计</a></li>
<li><a onclick="sign()">标识设计</a></li>
<li><a onclick="vi()">VI设计</a></li>
<li><a onclick="packing()">包装设计</a></li>
<li><a onclick="album()">画册设计</a></li>
<li><a onclick="poster()">海报设计</a></li>
</ul>
</div>
<div class="customerService">
<div class="cstitle">
<span>在线客服</span>
</div>
<div class="worker">
<p><a href="#">客服一</a></p>
<p><a href="#">客服二</a></p>
</div>
<div class="time">
<div class="ttitle">工作时间</div>
<p>周一至周六 ：8:30-17:00</p>
</div>
<div class="line">
<div class="ltitle">联系方式</div>
<p>张经理：18561396179</p>
</div>
</div>
<!-- customerservice结束 -->
</div>
<!-- svcontent ENDING -->
<div class="svmessage" id="dispear">
<div id="logo" class="lt" style="display:block">
<div class="svmtitle">logo设计</div>
<p>展现公司形象，加强客户服务，完善网络业务。网页制作是企业开展电子商务的基础设施和信息平台，是internet上宣传和反映企业形象和文化的重要窗口。新竞争力也认为注重网站的网络营销价值而不是外在表现。网页制作是指使用标识语言，通过一系列设计、建模、和执行的过程将电子格式的信息通过互联网传输，浏览。</p>
</div>
<div id="sign" class="lt">
<div class="svmtitle">标志设计</div>
<p>标志是企业文化、理念、精神凝聚的灵魂,标志是商战中屹立不倒的帅旗，我们的商标标志设计，无论设计思路还是理念，都与国际接轨，充分吸引国外先进成熟的设计精髓，同时尊重本土民族文化，使标志设计既尊重本土市场又具有国际化。</p>
</div>
<div id="vi" class="lt">
<div class="svmtitle">VI设计</div>
<p>VI设计是企业文化的视觉符号,是企业价值观的视觉载体。在塑造一个团队的过程当中，代表了一个团队的信念、理想、抱负它所形成的统一而鲜明的品牌形象，使企业与市场沟通更直接有效，帮助消费者对企业及其产品建立好感与信心，加强市场号召力。</p>
</div>
<div id="packing" class="lt">
<div class="svmtitle">包装设计</div>
<p>商品包装设计应当激起消费者强烈的购买欲望，直接形成购买力！能否激发消费者的购买欲望，是评价商品包装设计成败的最重要标准之一。要想达到这一目标需要设计者充分考虑商业、工业、艺术、心理等各方面因素</p>
</div>
<div id="album" class="lt">
<div class="svmtitle">画册设计</div>
<p>用流畅的线条、和谐的图片，配上我们策划人员的优美文字，设计成一本富有创意，又具有可读、可赏性的精美画册。全方位立体展示企业的风貌、理念宣传产品、树立品牌形象。在画册设计、创意的过程中我们会依据不同内容、不同的主题特征，进行优势整合，统筹规划，使画册在整体和谐中求创新。</p>
</div>
<div id="poster" class="lt">
<div class="svmtitle">海报设计</div>
<p>海报设计讲求创意和冲击力，并配以精彩的文案，力求使我们的作品立体地展现企业的产品、文化、理念，有非常实效的营销力，与多数图片加文字堆砌组合的普通设计形成鲜明的对比，具有强烈的视觉冲击力注重实用和创新是我们的特色！</p>
</div>
</div>
<!-- svmessage ENDING -->

</div>
<!-- content ENDING -->
</body>
</html>
...全文
168 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
vswen5 2015-10-22
  • 打赏
  • 举报
 回复
javascript 不能根据class获取哎 ... 我javascript基本都不用了 都是用jquery
vswen5 2015-10-22
  • 打赏
  • 举报
 回复 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>服务内容</title>
<style type="text/css">
      ul,li {list-style: none; margin: 0px; padding: 0px;}
 .content{width:1200px; margin:0 auto; font-family:"微软雅黑",Arial,Helvetica,sans-serif;}
 .svcontent{width: 278px;  float:left; margin-right: 20px;}
 .cl{border: 1px solid #ccc;border-bottom: none;}
 .svtitle{background:url(images/dot.jpg) repeat-x; height: 40px; line-height:40px; text-indent: 14px; }
 .classify li a{display: block; text-decoration: none; color: black; border-bottom: 1px solid #ccc; font-size:14px; padding:5px 0px; text-indent: 10px; }
 a:hover{background: #fffcd5;}
 .svmessage{width:900px; float: left; position: relative;}
 .lt{position: absolute; top: 0px; left: 0px; display:none;}
 /*-----*/
 .customerService{width:278px;height: 260px; margin-top:20px; border: 1px #cecece solid;}
 .cstitle{font-family:"微软雅黑",Arial,Helvetica,sans-serif; font-size: 14px; font-weight: bold;height:40px; line-height:40px; background: url(images/jh.jpg)#eeeced 5px 15px no-repeat; text-indent: 30px;}
 .worker p a{font-size: 10px; padding:10px 30px; background:url(images/qq.gif) 5px 5px no-repeat; height: 20px; line-height: 20px; text-decoration: none; color: #000;}
.time{
height: 60px; border-bottom: 1px dashed #ccc; border-top: 1px dashed #ccc;
}
.ttitle{ background: url(images/clock.png)2px 2px no-repeat; text-indent: 30px; height:30px; line-height: 30px; font-size: 15px; font-weight: bold;}
.time p{font-size: 10px; text-indent: 2px;}
.line{
height: 60px;	}
.ltitle{ background: url(images/weixin.png)2px 2px no-repeat; text-indent: 30px; height:30px; line-height: 30px; font-size: 15px; font-weight: bold;}
.line p{font-size: 10px; text-indent: 2px;}
.svmtitle{font-size: 20px; text-align: center;}
</style>
<script type="text/javascript">

 function qh(id){
    var divTx = document.getElementsByTagName("div");
	for (var i = 0;i < divTx.length; i++) {
		if(divTx[i].className =="lt"){
			divTx[i].style.display="none";
		}
	}

	var vslt = document.getElementById(id);
	vslt.style.display="block";
 }
</script>
</head>
<body>
<div class="content">
<div class="svcontent">
    <div class="cl">
<div class="svtitle">产品分类</div>
<ul class="classify">
<li><a onclick="qh('logo')">logo设计</a></li>
<li><a onclick="qh('sign')">标识设计</a></li>
<li><a onclick="qh('vi')">VI设计</a></li>
<li><a onclick="qh('packing')">包装设计</a></li>
<li><a onclick="qh('album')">画册设计</a></li>
<li><a onclick="qh('poster')">海报设计</a></li>
</ul>
</div>
<div class="customerService">
<div class="cstitle">
<span>在线客服</span>
</div>
<div class="worker">
<p><a href="#">客服一</a></p>
<p><a href="#">客服二</a></p>
</div>
<div class="time">
<div class="ttitle">工作时间</div>
<p>周一至周六 ：8:30-17:00</p>
</div>
<div class="line">
<div class="ltitle">联系方式</div>
<p>张经理：18561396179</p>
</div>
</div>
<!-- customerservice结束 -->
</div>
<!-- svcontent ENDING -->
    <div class="svmessage" id="dispear">
    	<div id="logo" class="lt" style="display:block">
    	<div class="svmtitle">logo设计</div>
    	<p>展现公司形象，加强客户服务，完善网络业务。网页制作是企业开展电子商务的基础设施和信息平台，是internet上宣传和反映企业形象和文化的重要窗口。新竞争力也认为注重网站的网络营销价值而不是外在表现。网页制作是指使用标识语言，通过一系列设计、建模、和执行的过程将电子格式的信息通过互联网传输，浏览。</p>
    	</div>
    	<div id="sign" class="lt">
    	<div class="svmtitle">标志设计</div>
    	<p>标志是企业文化、理念、精神凝聚的灵魂,标志是商战中屹立不倒的帅旗，我们的商标标志设计，无论设计思路还是理念，都与国际接轨，充分吸引国外先进成熟的设计精髓，同时尊重本土民族文化，使标志设计既尊重本土市场又具有国际化。</p>
    	</div>
    	<div id="vi" class="lt">
    	<div class="svmtitle">VI设计</div>
    	<p>VI设计是企业文化的视觉符号,是企业价值观的视觉载体。在塑造一个团队的过程当中，代表了一个团队的信念、理想、抱负它所形成的统一而鲜明的品牌形象，使企业与市场沟通更直接有效，帮助消费者对企业及其产品建立好感与信心，加强市场号召力。</p>
    	</div>
    	<div id="packing" class="lt">
    	<div class="svmtitle">包装设计</div>
    	<p>商品包装设计应当激起消费者强烈的购买欲望，直接形成购买力！能否激发消费者的购买欲望，是评价商品包装设计成败的最重要标准之一。要想达到这一目标需要设计者充分考虑商业、工业、艺术、心理等各方面因素</p>
    	</div>
    	<div id="album" class="lt">
    	<div class="svmtitle">画册设计</div>
    	<p>用流畅的线条、和谐的图片，配上我们策划人员的优美文字，设计成一本富有创意，又具有可读、可赏性的精美画册。全方位立体展示企业的风貌、理念宣传产品、树立品牌形象。在画册设计、创意的过程中我们会依据不同内容、不同的主题特征，进行优势整合，统筹规划，使画册在整体和谐中求创新。</p>
    	</div>
    	<div id="poster" class="lt">
    	<div class="svmtitle">海报设计</div>
    	<p>海报设计讲求创意和冲击力，并配以精彩的文案，力求使我们的作品立体地展现企业的产品、文化、理念，有非常实效的营销力，与多数图片加文字堆砌组合的普通设计形成鲜明的对比，具有强烈的视觉冲击力注重实用和创新是我们的特色！</p>
    	</div>
    </div>
<!-- svmessage ENDING -->
     
</div>
<!-- content ENDING -->
</body>
</html>
chanel_1 2015-10-22
  • 打赏
  • 举报
 回复
楼主要懂得应用class标签， 比如下面这个方法 function packing(){ var lt = document.getElementById("logo"); lt.style.display="none"; var ltt = document.getElementById("sign"); ltt.style.display="none"; var vi = document.getElementById("vi"); vi.style.display="none"; var album = document.getElementById("album"); album.style.display="none"; var poster = document.getElementById("poster"); poster.style.display="none"; var packing = document.getElementById("packing"); packing.style.display="block"; } 完全可以给这些id定义一个相同的class，点击的时候让有这个class的都隐藏，然后这个id再显示出来，或者根本不用id，完全用数组class来控制。同样给选项卡相同的class，所有的点击事件写一个方法就行
hch126163 2015-10-22
  • 打赏
  • 举报
 回复
看代码 类似 选项卡效果 http://blog.csdn.net/hch126163/article/details/6050485
Rails基础入门
Rails 是使用 Ruby 语言编写的 Web 应用开发框架，目的是通过解决快速开发中的共通问题，简化 Web 应用的开发。与其他编程语言和框架相比，使用 Rails 只需编写更少代码就能实现更多功能
JavaScript 经验总结
一、简化代码 1.1 JavaScript创建对象 一般是这样写的： var car=new Object(); car.colour='red'; car.wheels=4; car.hubcaps='spinning'; car.age=4; 代码很正确，但是有点不足的是你一直在重复敲car，很繁琐。 var car={ colour:'red', wheels:4, hubca...
初学jquery
趁着项目组还没给我分配活，学习点jquery。以后都要用，先学习学习。   jquery是一个javascript库。可以简化javascript 的操作。jquery的口号是：write less ,do more.   这是我写的第一个代码： jquery1.html &lt;html&gt; &lt;head&gt; &lt;script type = "t...
JavaScript初学必须注意到得七个细节
每种语言都有它特别的地方，对于JavaScript来说，使用var就可以声明任意类型的变量，这门脚本语言看起来很简单，然而想要写出优雅的代码却是需要不断积累经验的。本文利列举了JavaScript初学者应该注意的七个细节，与大家分享。（1）简化代码JavaScript定义对象和数组非常简单，我们想要创建一个对象，一般是这样写的：后面的写法要短得多，而且你不需要重复写对象名称。...
JavaScript库——jQuery基础及选择器
jQuery含义 Write less,do more! 写的很少 做的很多 jquery是一个快速，小巧而且功能丰富的JavaScript库（框架）。 总结：jQuery是一个JavaScript函数库，是一个轻量级“写得少，做得多”的JavaScript库 jQuery作用 HTML元素选取 HTML元素操作 css操作 事件函数 JavaScript特效和动画 DOM遍历 ajax jQuery目的 化大为小，化简为繁 ——简化代码，使得程序更加高效 主要代替繁琐的原生的JavaScript
JavaScript

87,775

社区成员

224,623

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章