0

Hello Web Developers!

I need a simple help out here:

This is my JS code:

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
 
function CngClass(){
 var zxcevt=window.event||arguments.callee.caller.arguments[0];
 var zxcobj=window.event?zxcevt.srcElement:zxcevt.target;
 while (zxcobj.parentNode){
  if (zxcobj.nodeName=='LI') break;
  zxcobj=zxcobj.parentNode;
 }
 if (zxcobj.nodeName!='LI') return;
 var zxcul=zxcobj.parentNode;
 var lis=zxcul.getElementsByTagName('LI');
 for (var z0=0;z0<lis.length;z0++){
  lis[z0].className=lis[z0]!=zxcobj?'off':'on';
 }
}
 
 
 
/*]]>*/
</script>

This is my HTML code:

<ul class="titleNav" onclick="CngClass();">
 
<li class="bold">Conditions</li>
<li class="on" >Deposit Modes</li>
<li class="off" >Withdrawal Modes</li>
<li class="off">Accounts</li>
<li class="off">Regulation</li>
</ul>

This script is to change class on click.

MY QUESTION: How can I change class only <li> that have this ID=change
(I don't know how to edit JS script, I'm not so expert)

Like:
<li class="bold">Conditions</li> <this on don't change
<li class="on" id="change" >Deposit Modes</li> and this one Yes.

If some one have skills to resolve this little problem please post it here.
Thanks for help!

Edited by Ezzaral: Added code tags. Please use them to format any code that you post.

4
Contributors
19
Replies
20
Views
6 Years
Discussion Span
Last Post by Airshow
0

all you need is:

var LI = document.getElementById('change');
if( LI )
{ //you located an element with id='change'
  LI.className='someOtherClassNameHere';
}
else
{
//no element contains id="change"
}
0

Please stay here... i gonna check it.. :)))
Just a second..
Thanks..

0

How do i incorporate your code into all ready existing?

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function CngClass(){
var zxcevt=window.event||arguments.callee.caller.arguments[0];
var zxcobj=window.event?zxcevt.srcElement:zxcevt.target;
while (zxcobj.parentNode){
if (zxcobj.nodeName=='LI') break;
zxcobj=zxcobj.parentNode;
}
if (zxcobj.nodeName!='LI') return;
var zxcul=zxcobj.parentNode;
var lis=zxcul.getElementsByTagName('LI');
for (var z0=0;z0<lis.length;z0++){
lis[z0].className=lis[z0]!=zxcobj?'off':'on';
}
}



/*]]>*/
</script>
0

I need to change this code here:

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
 
function CngClass(){
 var zxcevt=window.event||arguments.callee.caller.arguments[0];
 var zxcobj=window.event?zxcevt.srcElement:zxcevt.target;
 while (zxcobj.parentNode){
  if (zxcobj.nodeName=='LI') break;
  zxcobj=zxcobj.parentNode;
 }
 if (zxcobj.nodeName!='LI') return;
 var zxcul=zxcobj.parentNode;
 var lis=zxcul.getElementsByTagName('LI');
 for (var z0=0;z0<lis.length;z0++){
  lis[z0].className=lis[z0]!=zxcobj?'off':'on';
 }
}
 
 
 
/*]]>*/
</script>

it's must be like this:

<ul class="titleNav" onclick="CngClass();">

<li class="bold">Conditions</li> // This don't change
<li class="on" id="change" >Deposit Modes</li> // This change
<li class="off" id="change" >Withdrawal Modes</li> // This change
<li class="off" id="change">Accounts</li> // This change
<li class="off" id="change">Regulation</li> // This change
</ul>

So when i click on <li> it have to become class="on" and when i click on other <li> the last <li> become class="off" and new <li> become class="on" ( But fine this works great)
The only problem that i have that: <li class="bold">Conditions</li> becoume also class="off" when i click on others <li>

So i was thinking to put ID on <li> so only that with id will change.

Owh.. gush .. i hope i explained my self

Thanks to all who try to help me!

Edited by Ezzaral: Added code tags. Please use them to format any code that you post.

0

I tryed but it still change all of <li> classes (also class="bold" that that must stay blod

0

try:

function CngClass(){
    var zxcevt=window.event||arguments.callee.caller.arguments[0];
    var zxcobj=window.event?zxcevt.srcElement:zxcevt.target;
    while (zxcobj.parentNode){
        if (zxcobj.nodeName=='LI') 
            break;
        zxcobj=zxcobj.parentNode;
    }
    if (zxcobj.nodeName!='LI') 
        return;

    var zxcul=zxcobj.parentNode;
    var lis=zxcul.getElementsByTagName('LI');
    for (var z0=0;z0<lis.length;z0++){
        lis[z0].className=lis[z0]!=zxcobj?'off':'on';
        if( lis[z0].className=='on')
          lis[z0].id='change';
        else
          lis[z0].id='';
    }
}

Edited by hielo: n/a

0

I just need To edit this on JS
var lis=zxcul.getElementsByTagName('LI'); + ByID
Don't know how to do it

0

var lis=zxcul.getElementsByTagName('LI')[b];[/b] + ByID the PLUS symbol is meant to "join" the "stuff" on the left with the "stuff" on the right, so get RID of the semicolon to the left of the PLUS symbol.

Edited by hielo: n/a

0

This is what i have:

<ul class="titleNav" onclick="CngClass();">

<li class="bold">Conditions</li>
<li class="on" id="change" ><a id="myHeader1" href="javascript:showonlyone('newboxes1');" >Deposit Modes</a></li>
<li class="off" id="change" ><a id="myHeader2" href="javascript:showonlyone('newboxes2');" >Withdrawal Modes</a></li>
<li class="off" id="change" ><a id="myHeader2" href="javascript:showonlyone('newboxes3');" >Accounts</a></li>
<li class="off" id="change" ><a id="myHeader2" href="javascript:showonlyone('newboxes4');" >Regulation</a></li>
</ul>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function CngClass(){
    var zxcevt=window.event||arguments.callee.caller.arguments[0];
    var zxcobj=window.event?zxcevt.srcElement:zxcevt.target;
    while (zxcobj.parentNode){
        if (zxcobj.nodeName=='LI') 
            break;
        zxcobj=zxcobj.parentNode;
    }
    if (zxcobj.nodeName!='LI') 
        return;
 
    var zxcul=zxcobj.parentNode;
    var lis=zxcul.getElementsByTagName('LI');
    for (var z0=0;z0<lis.length;z0++){
        lis[z0].className=lis[z0]!=zxcobj?'off':'on';
        if( lis[z0].className=='on')
          lis[z0].id='change';
        else
          lis[z0].id='';
    }
}


/*]]>*/
</script>
0

var lis=zxcul.getElementsByTagName('LI'); + ByID
the PLUS symbol is meant to "join" the "stuff" on the left with the "stuff" on the right, so get RID of the semicolon to the left of the PLUS symbol.

Nope...nope... I did not explane my self... well..

Just gop here: http://brokerhabitat.com/ava_fx/

See the condition menu.. try to navigate.. you see that condition become class="off" but I don't neet it to change.
So I was thinking to change only <li> with ID="chage" ..

Omg.. so simple and so complicated..
Some one some ideas?

0

OMG! I made IT!!!!!!!!!!!!!!!!!!!!!!
After 6 Fk hours... for sucj simple thing.. can't believe..

I just aded <div> tag! to the bold class .. OMG!!

<div style="width:90px;"> <ul class="titleNav">
<li class="bold">Conditions</li></ul></div>
<div>
<ul class="titleNav" onclick="CngClass();">
<li class="on"  ><a id="myHeader1" href="javascript:showonlyone('newboxes1');" >Deposit Methods</a></li>
<li class="off"  ><a id="myHeader2" href="javascript:showonlyone('newboxes2');" >Withdrawal Methods</a></li>
<li class="off"  ><a id="myHeader2" href="javascript:showonlyone('newboxes3');" >Accounts</a></li>
<li class="off"  ><a id="myHeader2" href="javascript:showonlyone('newboxes4');" >Regulation</a></li>
</ul>
</div>
</div>

I hope it help some one...

0

The problem is the code line below with your original script.

lis[z0].className=lis[z0]!=zxcobj?'off':'on';

You may need to change to...

lis[z0].className=(lis[z0]!=zxcobj && lis[z0].className!="bold")?'off':'on';

Hmm... 2nd page... Didn't see that... Sorry.

Edited by Taywin: n/a

0

Artvor,

You DOUBLE POSTED this problem!!!!!!!

I just spent time providing you with a solution in the other topic then found this one already well underway.

You are in good hands with Hielo but please don't double post.

Airshow

Edited by Ezzaral: As requested ;)

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.