一个好用的js组件，但是如何实现这个功能？

yushilei 2008-10-31 09:49:17
http://www.klltapes.com.tw/js/js.htm

大家看看这个例子

默认情况下是 AAAA自动展开，BBBB、CCCC收起。

点击其中一个它会展开，其他的收起。


我想实现加载的时候，默认展开BBBB或者CCCC。

要如何做？
...全文
547 27 打赏 收藏 转发到动态 举报
写回复
用AI写文章
27 条回复
切换为时间正序
请发表友善的回复…
发表回复
yushilei 2008-11-03
  • 打赏
  • 举报
 回复
这个问题我已经搞定了，谢谢freelancerww.谢谢大家的热线帮忙。
yushilei 2008-11-03
  • 打赏
  • 举报
 回复
确实是代码是加载完了。

可是图片没加载，页面就停止了。

看看这个实例

http://www.klltapes.com.tw/new2008/products/?series_name=Warning%20Tape%20Series&series_id=37&id=123
freelancerww 2008-11-01
  • 打赏
  • 举报
 回复
window.addEvent('domready', function(){ }
就是页面加载完后 再调用该函数； 如确实有部分内容未加载的话，应该不是该函数导致的，
去掉这个函数， 那部分内容应该也不会被正确加载； 建议找下其他的原因！
ffhlffhl 2008-10-31
  • 打赏
  • 举报
 回复
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0036)http://www.klltapes.com.tw/js/js.htm -->
<HTML> <HEAD>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<SCRIPT type=text/javascript src="js_files/accordion_click.js"> </SCRIPT>
// 一个很笨的办法 支持FF、IE
<SCRIPT type=text/javascript>
window.addEvent('domready', function(){
var accordion = new Accordion('div.atStart', 'div.aStart',
{
opacity: true,
duration:500,
wait: false,
transition:Fx.Transitions.Circ.easeOut//,

}, $('accordion'));

var startlink = getResponseParameter('startlink');
if('' != startlink) {
var linkObject = document.getElementById(startlink);
if(linkObject) {
if(document.all) {
linkObject.click();
} else {
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", true, true);
linkObject.dispatchEvent(evt);
}
}
}
});

function getResponseParameter(strname) {
var hrefstr, pos, parastr, para, tempstr;
hrefstr = window.location.href;
pos = hrefstr.indexOf("?");
parastr = hrefstr.substring(pos + 1);
para = parastr.split("&");
tempstr = "";
for (i = 0; i < para.length; i++) {
tempstr = para[i];
pos = tempstr.indexOf("=");
if (tempstr.substring(0, pos) == strname) {
return tempstr.substring(pos + 1);
}
}
return "";
}

</SCRIPT>


<META name=GENERATOR content="MSHTML 6.00.6001.17184"> </HEAD>
<BODY >
<DIV id=accordion class="box2 fr">
<DIV id=list1 class="spacer white list1">
<UL class=block>
<DIV id=Panel1>
<LI>
<DIV class=atStart> <A title="" href="javascript:">AAAA </A> </DIV>
<DIV
style="BORDER-TOP: medium none; VISIBILITY: visible; PADDING-BOTTOM: 0px; OVERFLOW: hidden; PADDING-TOP: 0px; BORDER-BOTTOM: medium none; DISPLAY: block; HEIGHT: 57px; opacity: 1"
class=aStart>
<P> <A href="http://www.klltapes.com.tw/js/">AAAA 1 </A> <BR> </P>
<P>AAAA 2 <BR> </P>
<P>AAAA 3 <BR> </P> </DIV>
<LI>
<DIV class=atStart> <A title="" href="javascript:" id="BBBB" name="you">BBBB </A> </DIV>
<DIV
style="BORDER-TOP: medium none; VISIBILITY: visible; PADDING-BOTTOM: 0px; OVERFLOW: hidden; PADDING-TOP: 0px; BORDER-BOTTOM: medium none; DISPLAY: block; HEIGHT: 57px; opacity: 1"
class=aStart>
<P> <A href="file:///C:/test/js.htm?startlink=BBBB">BBBB 1 </A> <BR> </P>
<P>BBBB 2 <BR> </P>
<P>BBBB 3 <BR> </P> </DIV>
<LI>
<DIV class=atStart> <A title="" href="javascript:">CCCC </A> </DIV>
<DIV
style="BORDER-TOP: medium none; VISIBILITY: visible; PADDING-BOTTOM: 0px; OVERFLOW: hidden; PADDING-TOP: 0px; BORDER-BOTTOM: medium none; DISPLAY: block; HEIGHT: 57px; opacity: 1"
class=aStart>
<P> <A href="http://www.klltapes.com.tw/js/">CCCC 1 </A> <BR> </P>
<P>CCCC 2 <BR> </P>
<P>CCCC 3 <BR> </P> </DIV> </LI> </DIV> </UL> </DIV>
<DIV class=bot> </DIV> </DIV> </BODY> </HTML>
xuwaypouper 2008-10-31
  • 打赏
  • 举报
 回复
为什么公司都喜欢封Q？
freelancerww 2008-10-31
  • 打赏
  • 举报
 回复
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0036)http://www.klltapes.com.tw/js/js.htm -->
<HTML><HEAD>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<SCRIPT type=text/javascript src="js_files/accordion_click.js"></SCRIPT>
// 一个很笨的办法 支持FF、IE
<SCRIPT type=text/javascript>
window.addEvent('domready', function(){
var accordion = new Accordion('div.atStart', 'div.aStart',
{
opacity: true,
duration:500,
wait: false,
transition:Fx.Transitions.Circ.easeOut//,

}, $('accordion'));

var startlink = getResponseParameter('startlink');
if('' != startlink) {
var linkObject = document.getElementById(startlink);
if(linkObject) {
if(document.all) {
linkObject.click();
} else {
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", true, true);
linkObject.dispatchEvent(evt);
}
}
}
});

function getResponseParameter(strname) {
var hrefstr, pos, parastr, para, tempstr;
hrefstr = window.location.href;
pos = hrefstr.indexOf("?");
parastr = hrefstr.substring(pos + 1);
para = parastr.split("&");
tempstr = "";
for (i = 0; i < para.length; i++) {
tempstr = para[i];
pos = tempstr.indexOf("=");
if (tempstr.substring(0, pos) == strname) {
return tempstr.substring(pos + 1);
}
}
return "";
}

</SCRIPT>


<META name=GENERATOR content="MSHTML 6.00.6001.17184"></HEAD>
<BODY >
<DIV id=accordion class="box2 fr">
<DIV id=list1 class="spacer white list1">
<UL class=block>
<DIV id=Panel1>
<LI>
<DIV class=atStart><A title="" href="javascript:">AAAA</A></DIV>
<DIV
style="BORDER-TOP: medium none; VISIBILITY: visible; PADDING-BOTTOM: 0px; OVERFLOW: hidden; PADDING-TOP: 0px; BORDER-BOTTOM: medium none; DISPLAY: block; HEIGHT: 57px; opacity: 1"
class=aStart>
<P><A href="http://www.klltapes.com.tw/js/">AAAA 1</A><BR></P>
<P>AAAA 2<BR></P>
<P>AAAA 3<BR></P></DIV>
<LI>
<DIV class=atStart><A title="" href="javascript:" id="BBBB" name="you">BBBB</A></DIV>
<DIV
style="BORDER-TOP: medium none; VISIBILITY: visible; PADDING-BOTTOM: 0px; OVERFLOW: hidden; PADDING-TOP: 0px; BORDER-BOTTOM: medium none; DISPLAY: block; HEIGHT: 57px; opacity: 1"
class=aStart>
<P><A href="file:///C:/test/js.htm?startlink=BBBB">BBBB 1</A><BR></P>
<P>BBBB 2<BR></P>
<P>BBBB 3<BR></P></DIV>
<LI>
<DIV class=atStart><A title="" href="javascript:">CCCC</A></DIV>
<DIV
style="BORDER-TOP: medium none; VISIBILITY: visible; PADDING-BOTTOM: 0px; OVERFLOW: hidden; PADDING-TOP: 0px; BORDER-BOTTOM: medium none; DISPLAY: block; HEIGHT: 57px; opacity: 1"
class=aStart>
<P><A href="http://www.klltapes.com.tw/js/">CCCC 1</A><BR></P>
<P>CCCC 2<BR></P>
<P>CCCC 3<BR></P></DIV></LI></DIV></UL></DIV>
<DIV class=bot></DIV></DIV></BODY></HTML>
yushilei 2008-10-31
  • 打赏
  • 举报
 回复
有聪明的方法吗？

这个不适用于 FF
freelancerww 2008-10-31
  • 打赏
  • 举报
 回复
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0036)http://www.klltapes.com.tw/js/js.htm -->
<HTML><HEAD>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<SCRIPT type=text/javascript src="js_files/accordion_click.js"></SCRIPT>
// 一个很笨的办法 只支持IE
<SCRIPT type=text/javascript>
window.addEvent('domready', function(){
var accordion = new Accordion('div.atStart', 'div.aStart',
{
opacity: true,
duration:500,
wait: false,
transition:Fx.Transitions.Circ.easeOut//,

}, $('accordion'));

var startlink = getResponseParameter('startlink');
if('BBBB' == startlink) {
document.getElementById('BBBB').click();
}
});

function getResponseParameter(strname) {
var hrefstr, pos, parastr, para, tempstr;
hrefstr = window.location.href;
pos = hrefstr.indexOf("?");
parastr = hrefstr.substring(pos + 1);
para = parastr.split("&");
tempstr = "";
for (i = 0; i < para.length; i++) {
tempstr = para[i];
pos = tempstr.indexOf("=");
if (tempstr.substring(0, pos) == strname) {
return tempstr.substring(pos + 1);
}
}
return "";
}


</SCRIPT>


<META name=GENERATOR content="MSHTML 6.00.6001.17184"></HEAD>
<BODY >
<DIV id=accordion class="box2 fr">
<DIV id=list1 class="spacer white list1">
<UL class=block>
<DIV id=Panel1>
<LI>
<DIV class=atStart><A title="" href="javascript:">AAAA</A></DIV>
<DIV
style="BORDER-TOP: medium none; VISIBILITY: visible; PADDING-BOTTOM: 0px; OVERFLOW: hidden; PADDING-TOP: 0px; BORDER-BOTTOM: medium none; DISPLAY: block; HEIGHT: 57px; opacity: 1"
class=aStart>
<P><A href="http://www.klltapes.com.tw/js/">AAAA 1</A><BR></P>
<P>AAAA 2<BR></P>
<P>AAAA 3<BR></P></DIV>
<LI>
<DIV class=atStart><A title="" href="javascript:" id="BBBB">BBBB</A></DIV>
<DIV
style="BORDER-TOP: medium none; VISIBILITY: visible; PADDING-BOTTOM: 0px; OVERFLOW: hidden; PADDING-TOP: 0px; BORDER-BOTTOM: medium none; DISPLAY: block; HEIGHT: 57px; opacity: 1"
class=aStart>
<P><A href="file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/js/js.htm?startlink=BBBB">BBBB 1</A><BR></P>
<P>BBBB 2<BR></P>
<P>BBBB 3<BR></P></DIV>
<LI>
<DIV class=atStart><A title="" href="javascript:">CCCC</A></DIV>
<DIV
style="BORDER-TOP: medium none; VISIBILITY: visible; PADDING-BOTTOM: 0px; OVERFLOW: hidden; PADDING-TOP: 0px; BORDER-BOTTOM: medium none; DISPLAY: block; HEIGHT: 57px; opacity: 1"
class=aStart>
<P><A href="http://www.klltapes.com.tw/js/">CCCC 1</A><BR></P>
<P>CCCC 2<BR></P>
<P>CCCC 3<BR></P></DIV></LI></DIV></UL></DIV>
<DIV class=bot></DIV></DIV></BODY></HTML>
yushilei 2008-10-31
  • 打赏
  • 举报
 回复
9楼的方法不行
yushilei 2008-10-31
  • 打赏
  • 举报
 回复
公司封杀qq
pierrechenmin 2008-10-31
  • 打赏
  • 举报
 回复
楼主，偶这有实现的例子，无法让你直接访问，需要的话，我可以谈谈思路。QQ 248333062
yushilei 2008-10-31
  • 打赏
  • 举报
 回复
位置不能变动

其实我的意思是要，点击“BBBB 1” 后页面会重新加载，但是默认展开的是BBBB项
freelancerww 2008-10-31
  • 打赏
  • 举报
 回复
一个笨点的办法 红色部分为修改的， 一共两处
<SCRIPT type=text/javascript>
window.addEvent('domready', function(){
var accordion = new Accordion('div.atStart', 'div.aStart',
{
opacity: true,
duration:500,
wait: false,
transition:Fx.Transitions.Circ.easeOut//,

}, $('accordion'));

document.getElementById("startlink").click();
});


</SCRIPT>

<DIV class=atStart><A title="" href="javascript:" id="startlink">BBBB</A></DIV>
耶律火柴 2008-10-31
  • 打赏
  • 举报
 回复
把AAA的代码放到BBB下不就行了。

如果是后台传过来的数据，则改变后台选择内容的代码，
java__king 2008-10-31
  • 打赏
  • 举报
 回复
MARK
chris9999 2008-10-31
  • 打赏
  • 举报
 回复
试了一下，搞不定!
yushilei 2008-10-31
  • 打赏
  • 举报
 回复
页面另存，即可得其源代码。
lihan6415151528 2008-10-31
  • 打赏
  • 举报
 回复
楼主，你如果能提供这个效果内部导入的js的话，就好说了
关键这个例子源代码都获取不到，怎么修改？
lihan6415151528 2008-10-31
  • 打赏
  • 举报
 回复
楼主，你如果能提供这个效果内部导入的js的话，就好说了
关键这个例子源代码都获取不到，怎么修改？
lihan6415151528 2008-10-31
  • 打赏
  • 举报
 回复
楼主，你如果能提供这个效果内部导入的js的话，就好说了
关键这个例子源代码都获取不到，怎么修改？
加载更多回复（7）
基于html5、JS实现的二维码扫码
调出摄像头，拍照保存到画布，定时传送到解析函数 解析函数是后台c# .net MVC 实现的，解析函数用到的二维码解析API依赖于第三方二维码库google zxing , 因此需要先引用类库：zxing.dll、zxing.presentation.dll
EasyUI_简单登陆界面.zip
EasyUI_简单登陆界面.zip
Ext4+JSON+Servlet+Tree构建Web应用框架
Ext4+JSON+Servlet/Struts2+Ext.tree.Panel+Ext.tab.Panel构建Web应用系统框架
jquery-easyui完整demo演示
jquery-easyui完整demo演示
jQuery.ui.1.7.2中文文档
目前已经完成了大部分内容, 希望可以帮助到各位网友.
Web 开发

81,114

社区成员

341,728

社区内容

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

加载中

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

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

+ 用AI写文章