Hi, I'm not sure what you're goal is, so I'll provide 2 options for inspiration. I didn't use the method you tried, moved the bg-color to the listitem and used a first-child/last-child for the corners.
The first one, shows or hides a <div> on the same page depending on the currentTab The second one leaves out any javascript. If you've got just 3 pages, you can hard-code the currentTab. Not really tested or elelegant. regards, Chris ----- -- show the the corresponding div of the selected tab ----- <html> <head> <script language="javascript" type="text/javascript"> function showHide(shID) { if (document.getElementById(shID)) { document.getElementById('tab1-content').style.display = 'none'; document.getElementById('tab2-content').style.display = 'none'; document.getElementById('tab3-content').style.display = 'none'; document.getElementById(shID + '-content').style.display = 'block'; document.getElementById('tab1').className = ''; document.getElementById('tab2').className = ''; document.getElementById('tab3').className = ''; document.getElementById(shID).className = 'currentTab' } } </script> <style type="text/css"> #nav a:link { display:block; width:200px; font:12px verdana,sans-serif; font-weight:bold; color:#FFFFFF; text-align:center; padding:4px; text-decoration:none; text-transform:uppercase; } ul#nav { list-style-type:none; margin:0; padding:0; overflow:hidden; } #nav li { float:left; background-color:#8EBA44; } #nav li:hover { background-color:#7A991A; } #nav li:first-child { border-top-left-radius: 4px 4px; border-bottom-left-radius: 4px 4px; } #nav li:last-child { border-top-right-radius: 4px 4px; border-bottom-right-radius: 4px 4px; } #nav li.currentTab { background-color:#7A991A; } </style> </head> <body onload="showHide('tab1')"> <ul id="nav"> <li id="tab1"><a href="#" onclick="showHide('tab1')">About</a></li> <li id="tab2"><a href="#" onclick="showHide('tab2')">Contact</a></li> <li id="tab3"><a href="#" onclick="showHide('tab3')">Terms</a></li> </ul> <ul> <li>another list</li> <li>without style</li> </ul> <div> <div id="tab1-content" class="tab"><p>layer 1</p></div> <div id="tab2-content" class="tab"><p>layer 2</p></div> <div id="tab3-content" class="tab"><p>layer 3</p></div> </div> </body> </html> ----- -- add a class currentTab to the currently showing page ----- <html> <head> <style type= "text/css"> -- the same styles as above </style> </head> <body> <ul id="nav"> <li class="currentTab"><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Terms</a></li> </ul> <ul> <li><a href="#">test list</a></li> <li><a href="#">without style</a></li> </ul> </body> </html> Op 5 apr. 2014, om 08:47 heeft Nakia Brewer <nakia.bre...@westrac.com.au> het volgende geschreven: > I am trying to replicate the method here > > http://css-tricks.com/snippets/jquery/add-active-navigation-class-based-on-url/ > > > > Nakia Brewer | Technology & Solutions Manager | Equipment Management Solutions > t: (02) 49645051 | m: 0458 713 547 | i: www.westrac.com.au > > > ACN 009 342 572 > > > -----Original Message----- > From: use-livecode [mailto:use-livecode-boun...@lists.runrev.com] On Behalf > Of Nakia Brewer > Sent: Saturday, 5 April 2014 5:33 PM > To: How to use LiveCode > Subject: RE: HTML & CSS > > So here is what I am trying to do.. > Notes : I know next to nothing about HTML and CSS > The form service where I am trying to embed this HTML code only allows > me to embed the content as HTML. I cant reference files etc. > > So here is where I am up to. > I have been able to create the Navbar in HTML and CSS and it works. I am now > trying to add the ability for it to be able to detect if the current URL > contains The content of one of its link and if so set an active class on that > link so I can apply the hilite styling.. > > Man, I hope that makes sense.. > > Here is my attempt.. > > <head> > <script> > $(function() { > $('nav a[href^="\' + location.pathname.split("\")[1] + '"]').addId('active'); > }); </script> <style> ul { list-style-type:none; margin:0; padding:0; > overflow:hidden; } li { float:left; } a:link,a:visited { display:block; > width:200px; font:12px verdana,sans-serif; font-weight:bold; color:#FFFFFF; > background-color:#8EBA44; text-align:center; padding:4px; > text-decoration:none; text-transform:uppercase; } a:hover,a:active { > background-color:#7A991A; } #firstTab { > border-top-left-radius: 4px 4px; > border-bottom-left-radius: 4px 4px; > --background-color:#7A991A; > } > #lastTab > { > border-top-right-radius: 4px 4px; > border-bottom-right-radius: 4px 4px; > --background-color:#7A991A; > } > .active > { > background-color:#7A991A; > } > </style> > </head> > <body> > <nav> > <ul> > <li><a id="firstTab" href="\About\">About</a></li> <li><a > href="\Contact\">Contact</a></li> <li><a id="lastTab" > href="\Terms\">Terms</a></li> </ul> </nav> </body> </html> > > Nakia Brewer | Technology & Solutions Manager | Equipment Management Solutions > t: (02) 49645051 | m: 0458 713 547 | i: www.westrac.com.au > > > ACN 009 342 572 > > -----Original Message----- > From: use-livecode [mailto:use-livecode-boun...@lists.runrev.com] On Behalf > Of Nakia Brewer > Sent: Saturday, 5 April 2014 5:10 PM > To: How to use LiveCode > Cc: How to use LiveCode > Subject: Re: HTML & CSS > > Of only it was a website I was working on... > > It's actually for an online form service. They allow me to do customer page > content in HTML which is where I am building the Nav bar.. > > Should make sense when I send it through.. > > Sent from my iPhone > >> On 5 Apr 2014, at 2:39 pm, "stephen barncard" >> <stephenrevoluti...@barncard.com> wrote: >> >> On Fri, Apr 4, 2014 at 6:57 PM, Nakia Brewer >> <nakia.bre...@westrac.com.au>wrote: >> >>> Just wondering if there are any HTML /CSS oracle's among us? >> you don't need one. >> >> read this recent blog post. Bootstrap may be your answer. >> >> http://livecode.com/blog/2014/03/19/better-faster-stronger/ >> >> *--* >> *Stephen Barncard - San Francisco Ca. USA - Deeds Not Words* >> _______________________________________________ >> use-livecode mailing list >> use-livecode@lists.runrev.com >> Please visit this url to subscribe, unsubscribe and manage your subscription >> preferences: >> http://lists.runrev.com/mailman/listinfo/use-livecode >> > > COPYRIGHT / DISCLAIMER: This message and/or including attached files may > contain confidential proprietary or privileged information. If you are not > the intended recipient, you are strictly prohibited from using, reproducing, > disclosing or distributing the information contained in this email without > authorisation from WesTrac. If you have received this message in error please > contact WesTrac on +61 8 9377 9444. We do not accept liability in connection > with computer virus, data corruption, delay, interruption, unauthorised > access or unauthorised amendment. We reserve the right to monitor all e-mail > communications. > > > > _______________________________________________ > use-livecode mailing list > use-livecode@lists.runrev.com > Please visit this url to subscribe, unsubscribe and manage your subscription > preferences: > http://lists.runrev.com/mailman/listinfo/use-livecode > > > COPYRIGHT / DISCLAIMER: This message and/or including attached files may > contain confidential proprietary or privileged information. If you are not > the intended recipient, you are strictly prohibited from using, reproducing, > disclosing or distributing the information contained in this email without > authorisation from WesTrac. If you have received this message in error please > contact WesTrac on +61 8 9377 9444. We do not accept liability in connection > with computer virus, data corruption, delay, interruption, unauthorised > access or unauthorised amendment. We reserve the right to monitor all e-mail > communications. > > > > _______________________________________________ > use-livecode mailing list > use-livecode@lists.runrev.com > Please visit this url to subscribe, unsubscribe and manage your subscription > preferences: > http://lists.runrev.com/mailman/listinfo/use-livecode > > > COPYRIGHT / DISCLAIMER: This message and/or including attached files may > contain confidential proprietary or privileged information. If you are not > the intended recipient, you are strictly prohibited from using, reproducing, > disclosing or distributing the information contained in this email without > authorisation from WesTrac. If you have received this message in error please > contact WesTrac on +61 8 9377 9444. We do not accept liability in connection > with computer virus, data corruption, delay, interruption, unauthorised > access or unauthorised amendment. We reserve the right to monitor all e-mail > communications. > > > > _______________________________________________ > use-livecode mailing list > use-livecode@lists.runrev.com > Please visit this url to subscribe, unsubscribe and manage your subscription > preferences: > http://lists.runrev.com/mailman/listinfo/use-livecode _______________________________________________ use-livecode mailing list use-livecode@lists.runrev.com Please visit this url to subscribe, unsubscribe and manage your subscription preferences: http://lists.runrev.com/mailman/listinfo/use-livecode