能不能实现以下JS效果 - ASP技术论坛

| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛 |

编程论坛 → WEB开发 → 『 ASP技术论坛』 → 能不能实现以下JS效果

我的收件箱(0)

欢迎加入我们，一同切磋技术

共有 913 人关注过本帖

标题：能不能实现以下JS效果

只看楼主加入收藏

friends571

等　级：论坛游民
帖　子：129
专家分：30
注　册：2009-3-3
结帖率：82.5%

楼主

已结贴√ 问题点数：20 回复次数：11

能不能实现以下JS效果

请教小小JS问题，如下：
当我点击产品１时，显示图一

当我点击产品２时，显示图二

求这样的效果，谢谢

搜索更多相关主题的帖子: JS效果　

2009-08-10 08:56

friends571

等　级：论坛游民
帖　子：129
专家分：30
注　册：2009-3-3

第 2 楼

得分:0

符上图片

1.jpg (5.8 KB)

图片附件: 游客没有浏览图片的权限，请登录或注册

2.jpg (5.57 KB)

图片附件: 游客没有浏览图片的权限，请登录或注册

2009-08-10 08:57

qq5262866

等　级：新手上路
帖　子：10
专家分：6
注　册：2009-8-7

第 3 楼

得分:0

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.
<html xmlns="http://www.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script type="text/javascript">
function dianji(c1,c2,c3,c4){

c1.style.color="orange"
c2.style.color="#666"

if (c4.style.display=="none"){
c3.style.display="inline"}
else {c4.style.display="none"}
} </script>
<body>
<div onclick="dianji(this,cp2,a1,b1)" id="cp1"><span id="a1" style="display:inline">cp1</span><b style="display:none;" id="b1">cp1</b></div>
<div onclick="dianji(this,cp1,a2,b2)" id="cp2"><span id="a2" style="display:inline">cp2</span><b style="display:none;"
id="b2">cp2</b></div>
</body>

</html>
不好意思好像没有用

[ 本帖最后由 qq5262866 于 2009-8-10 09:16 编辑 ]

2009-08-10 09:14

friends571

等　级：论坛游民
帖　子：129
专家分：30
注　册：2009-3-3

第 4 楼

得分:0

如果有很多条怎么办，难道也要一条条的写吗

2009-08-10 09:42

qq5262866

等　级：新手上路
帖　子：10
专家分：6
注　册：2009-8-7

第 5 楼

得分:6

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.
<html xmlns="http://www.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.jc1{ font-weight:bold; color:orange}
.bjc1{ font-weight:100; color:#666}
</style>
<script type="text/javascript">
// JavaScript Document
function nTabs(thisObj,Num){
var tabObj = thisObj.parentNode.id;
var tabList = document.getElementById(tabObj).getElementsByTagName("li");

for(i=0; i <tabList.length; i++)
{
if (i == Num)
{
   thisObj.className = "jc1";

}else{
   tabList[i].className = "bjc1";

}
}
}
</script>
</head>

<body>
<div class="TabTitle4">
      <ul id="myTab44">
        <li class="active" onclick="nTabs(this,0);">陈志明</li>
        <li class="normal" onclick="nTabs(this,1);">陈二明</li>
        <li class="normal" onclick="nTabs(this,2);">志明</li>
        <li class="normal" onclick="nTabs(this,3);">陈朋明</li>
      </ul>
    </div>
</body>
</html>

[ 本帖最后由 qq5262866 于 2009-8-10 10:21 编辑 ]

2009-08-10 10:19

aspic

等　级：贵宾
威　望：51
帖　子：2258
专家分：8050
注　册：2008-2-18

第 6 楼

得分:0

程序代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. xmlns="http://www. http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0; padding:0; font-size:9pt}
body{padding:5px}
ul,li{list-style:none}
#list{width:250px; border:1px solid #ccc; border-bottom:none; margin:0 auto}
#list li{width:250px; height:22px; line-height:22px; color:#666; text-align:right; cursor:pointer; border-bottom:1px solid #ccc}
#list li.hover{font-weight:bold; color:#f60}
</style>
</head>

<body>
<ul id="list">
    <li>产品类别1></li>
    <li>产品类别2></li>
    <li>产品类别3></li>
    <li>产品类别4></li>
    <li>产品类别5></li>
    <li>产品类别6></li>
    <li>产品类别7></li>
    <li>产品类别8></li>
    <li>产品类别9></li>
</ul>
</body>
</html>
<script language="javascript">
//获取对象数组
var arrLi = document.getElementById('list').getElementsByTagName('li');
//设置第一个的默认class
arrLi[0].className = 'hover';
for(var i = 0; i< arrLi.length; i ++) {
    arrLi[i].onclick = function() {
        for(var j = 0; j < arrLi.length; j++) {
            arrLi[j].className = '';
        }
        this.className = 'hover';
    }
}
</script>

这样吧随便你几个

2009-08-10 10:34