Hallo leute,
ich bastel mit gerade für meine Site ein TabContainer, der auf einer der TabPages ein Submenu besitzt...
Das ganze realisiere ich durch Listen un mittels CSS bzw MooTools:
Hier das komplette CSS/JS/HTML, wie es auf einer leeren TestPage FUNTKTIONIERT (über schönheitsfehler des codes lässt sich streiten xD)
HTML:
Mein problem ist nun folgendes, wenn ich das ganze auf meine richtige Site üebrtrage, funktioniert es nicht mehr, die Fehlermeldung des 'try/catch' aus JS sagt mir folgendes:
"Error: ReferenceError: item1 is not defined"
Woran könnte das liegen?
mfg
ani
ich bastel mit gerade für meine Site ein TabContainer, der auf einer der TabPages ein Submenu besitzt...
Das ganze realisiere ich durch Listen un mittels CSS bzw MooTools:
Hier das komplette CSS/JS/HTML, wie es auf einer leeren TestPage FUNTKTIONIERT (über schönheitsfehler des codes lässt sich streiten xD)
HTML:
HTML:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools-yui-compressed.js"></script>
<style>
#nav1{
width:500px;
border:1px dotted black;
height:30px;
}
#nav1 li{
display:block;
list-style-type:none;
float:left;
border:1px dotted blue;
margin-right:5px;
}
#nav1 li a{
text-decoration:none;
color:black;
}
#nav1 li.sel a{
background-color:#060;
color:#FC9;
}
#nav2{
width:100px;
height:300px;
border:1px solid red;
float:left;
}
#nav2 li{
width:100px;
list-style-type:none;
display:block;
}
#nav2 li a{
text-decoration:none;
color:black;
}
#nav2 li.sel a{
background-color:#6C3;
color:#FC9;
}
#content1{
width:500px;
height:400px;
display:block;
border:1px dotted red;
}
#content2{
width:300px;
height:300px;
display:block;
border:1px solid blue;
float:right;
}
#content1 li{
list-style-type:none;
display:none;
}
#content1 li.active,
#content1 li.active #nav2 li,
#content1 li.active #content2 li.active{
display:block;
}
</style>
<script type="text/javascript">
window.addEvent('domready',function(){
var myNav = new Class({
Implements: [Events, Options],
options: {
sel: 'sel',
active: 'active'
},
listeNav: new Array(),
listeContent: new Array(),
initialize: function(options){
this.setOptions(options);
},
addPair: function(navItem, contentitem){
this.listeNav[this.listeNav.length] = navItem;
this.listeContent[this.listeContent.length] = contentitem;
},
showPair: function(navIndex){
this.listeNav.each(function(nav, index){
nav.removeClass('sel');
});
this.listeContent.each(function(con, index){
con.fade('out');
con.removeClass('active');
});
this.listeNav[navIndex].addClass(this.options.sel);
this.listeContent[navIndex].fade('in');
this.listeContent[navIndex].addClass(this.options.active);
}
});
var Navi = new myNav();
Navi.addPair($(item1), $(con1));
Navi.addPair($(item2), $(con2));
Navi.addPair($(item3), $(con3));
$(item1).addEvent('click',function(){
Navi.showPair(0);
});
$(item2).addEvent('click',function(){
Navi.showPair(1);
});
$(item3).addEvent('click',function(){
Navi.showPair(2);
});
var Navi2 = new myNav();
Navi2.addPair($(subItem1), $(subCon1));
Navi2.addPair($(subItem2), $(subCon2));
Navi2.addPair($(subItem3), $(subCon3));
Navi2.addPair($(subItem4), $(subCon4));
Navi2.addPair($(subItem5), $(subCon5));
$(subItem1).addEvent('click',function(){
Navi2.showPair(0);
});
$(subItem2).addEvent('click',function(){
Navi2.showPair(1);
});
$(subItem3).addEvent('click',function(){
Navi2.showPair(2);
});
$(subItem4).addEvent('click',function(){
Navi2.showPair(3);
});
$(subItem5).addEvent('click',function(){
Navi2.showPair(4);
});
alert('TEST!');
});
</script>
</head>
<body>
<div>
<ul id="nav1">
<li id="item1"><a href="#">Item 1</a></li>
<li id="item2" class="sel"><a href="#">Item 2</a></li>
<li id="item3"><a href="#">Item 3</a></li>
</ul>
<ul id="content1">
<li id="con1">Content 1</li>
<li id="con2" class="active">
<ul id="nav2">
<li id="subItem1" class="sel"><a href="#">Subitem 1</a></li>
<li id="subItem2"><a href="#">Subitem 2</a></li>
<li id="subItem3"><a href="#">Subitem 3</a></li>
<li id="subItem4"><a href="#">Subitem 4</a></li>
<li id="subItem5"><a href="#">Subitem 5</a></li>
</ul>
<ul id="content2">
<li id="subCon1" class="active">Subcontent 1</li>
<li id="subCon2">Subcontent 2</li>
<li id="subCon3">Subcontent 3</li>
<li id="subCon4">Subcontent 4</li>
<li id="subCon5">Subcontent 5</li>
</ul>
</li>
<li id="con3">Content 3</li>
</ul>
</div>
</body>
</html>Mein problem ist nun folgendes, wenn ich das ganze auf meine richtige Site üebrtrage, funktioniert es nicht mehr, die Fehlermeldung des 'try/catch' aus JS sagt mir folgendes:
"Error: ReferenceError: item1 is not defined"
Woran könnte das liegen?
mfg
ani
