能不能实现以下JS效果 - 编程论坛

#2

friends5712009-08-10 08:57

符上图片

#3

qq52628662009-08-10 09:14

<!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 编辑 ]

#4

friends5712009-08-10 09:42

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

#5

qq52628662009-08-10 10:19

<!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 编辑 ]

#6

aspic2009-08-10 10:34

程序代码：

<!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>

这样吧随便你几个

#7

aspic2009-08-10 10:36

晕死 utf编码的被过滤完了~还得另存gb2312发表才正常

#8

friends5712009-08-10 11:28

呵呵，这两种都可以，但是如果要要刷新后，又变回去了，怎么才能让它刷新后也保持不变

#9

yms1232009-08-10 11:46

以下是引用friends571在2009-8-10 11:28的发言：呵呵，这两种都可以，但是如果要要刷新后，又变回去了，怎么才能让它刷新后也保持不变

用Javascript和ASP的VBScript嵌套代码编写应该能做出来。

#10

friends5712009-08-10 12:52

请问具体应该怎么来写，呵呵，请高手给个思路，最好是能参考学习一下

#11

friends5712009-08-10 15:08

等待中....

#12

aspic2009-08-10 15:17

可以用cookies保存状态