Altering Link Style Of Selected Link

[Web Weenie]

I have an accordion menu that contains links to external html files that are displayed in an iframe. I need to 'alter' the links appearance to show which linked file is being displayed. All menuitems are <li>'s and are already modified by css. Is there a way to change the style of a single <li> within a group? currently all use the same class.

[thescientist]

have you looked into pseudo classes? There's one for active.http://www.w3schools.com/css/css_pseudo_classes.asp

[Web Weenie]

have you looked into pseudo classes? There's one for active.http://www.w3schools.com/css/css_pseudo_classes.asp

Ok I phrased that question wrong... How do I identify a specific link uniquely as it has been clicked so that css can modify? I would need to clear any previously selected link and modify the currently selected link. I don't know hot to do this. Is there a way to modify a class identifier for an element on the fly?

[thescientist]

so if it has been clicked do something to it with CSS? Why not use :visited then, which is also in that link. To go any further with this you may need a combination of visited and active psuedo classes, and modify their CSS with javascript.

[Web Weenie]

so if it has been clicked do something to it with CSS? Why not use :visited then, which is also in that link. To go any further with this you may need a combination of visited and active psuedo classes, and modify their CSS with javascript.

I've already tried the visited idea and the problem is once it is visited the link is changed. After clicking on several it looses the what I'm trying to accomplish which is show the current link being displayed. Is there a way to clear the visited link so it no longer id shown as visited?

[ShadowMage]

You can use JS to change the class name of an element:http://w3schools.com/jsref/prop_html_classname.aspOr if the page is submitted to server-side scripting you can use PHP to set the class of the element. All you'd have to do is pass the id of the element that was clicked.

[Web Weenie]

You can use JS to change the class name of an element:http://w3schools.com/jsref/prop_html_classname.aspOr if the page is submitted to server-side scripting you can use PHP to set the class of the element. All you'd have to do is pass the id of the element that was clicked.

this is good to know. I think I'm going to try an idea I have and hopefully I can make it work. I may be spinning my wheels on this, so if it doesn't come together quickly, I'll probably drop the whole thing for now. I've got too much on my plate without adding more, and I can always pick this back up to add a little polish.Thanks.

[MGmirkin]

How do I identify a specific link uniquely?

Semi-newbie here. Some HTML experience, recently self-taught CSS basics, still learning he finer points of properly structuring CSS so as not to f--- it up TOO badly and achieve the results I want. :)Use id in addition to class. It's similar to the name= attribute of the <a> tag in HTML. AKA, allows you to uniquely identify an element (just like uiniquely identifying an anchor in HTML so you can specify them with # at the end of a url like main.html#2ndParagraph), etc.Class targets all tags X with class Y. ID is used to uniquely identify specific elements. Each element must be uniquely so identified.Now, whether or not you can use that strictly in CSS to PERSISTENTLY change the style of an element, I'm not sure. That MAY require Javascript?I'm thinking something like the pseudo-class :focus might work? But that seems only a temporary solution, since as soon as the object you hit with it LOSES focus the style change ends. So, if clicking a link the link gets focus, but then if it changes an iframe, maybe the iframe gets focus and the link loses focus?How exactly is your page structured? And what exactly are you wanting to do?I'm thinking it sounds, to oversimplify, as thought you've got an inline frame (iframe), with several links next to it. The links update the contents of the iframe, say switching from one video to another or something?You then want the link (and maybe the surrounding area if it looks like a tab or something) to persistently change style while said item (we'll just say it's a video for convenience) is pulled up in the iframe. When a different link is clicked and a different item pulled up in the iframe, you want the link and possibly surrounding area for that item to be re-styled and the prior link to be de-styled.I think :focus is too haphazard, as losing focus would lose the styling.I assume that only one item can be selected at a time.I'm almost wondering if a creative solution might not be to somehow utilize form functionality, like a styled drop-down list or some other form-ish type list where only one uniquely identified selection can be used at a time. I'm not entirely sure ow it would work with changing the content of the iframe, unless selecting an option could also in some way change the content of the iframe (like making the option a link? Hmm, for some reason that sounds wrong). Afraid I've not worked with forms enough to know whether that'll work. But it seems like an elegant solution, since then you probably could use :focus or :active with one of the selectable list elements? Granted I don't know if it's possible or which browsers might support such an arrangement.Starting to sound like a job for Javascript, which I think allows for more dynamic changes to existing content.That is to say, identify each link individually with ID, then use JavaScript to style the ID'd link when clicked and de-style all other ID'd links at the same time. Code might get complicated... Something like an array with all the associated link IDs, when you click on one of the links, it styles that link and then de-styles all other links with different IDs from that array?I don't know JS well enough to know how you'd code that...So, the idea goes that you give each link an ID #, then [somehow] you write a script to generate a new JS array that catalogs all the IDs of the given tag / class / ID combination. This way you can do it for some arbitrary # of links (AKA, you can code for flexibility rather than having to specify each ID manually and update a manual list each time you add or subtract links with IDs on the page).Then you have another script that you call when clicking one of the links. It styles that link in the way you want and also de-styles (sets back to default) all the other links with non-identical IDs. I guess it would be like if ID==x Style A, if ID=/=x StyleB. (I don't know JS syntax & such.) At the same timeMaybe someone who knows JS better could write you up a simple something that does that.I'd think it wouldn't be too hard?

[Web Weenie]

Well you pretty much nailed it... A sidebar with an accordion type menu and an iframe that displays which ever link is clicked on. I thought I could do with a movable div but I just made a mess of things. This my be something to play with on a second pass polish but I don't see any way to do this without too much hair pulling.Thanks for the reply.

[MGmirkin]

Well you pretty much nailed it... A sidebar with an accordion type menu and an iframe that displays which ever link is clicked on. I thought I could do with a movable div but I just made a mess of things. This my be something to play with on a second pass polish but I don't see any way to do this without too much hair pulling.Thanks for the reply.

I also tentatively toyed with the idea of having separate pages with different things styled different ways. AKA, if you click a link it takes you to a different page with that link styled and the appropriate page dropped into the iframe. But then you'd be reloading different pages and it would be kludge-a-riffic.Also thought of the idea of an iframe within an iframe... AKA, have one iframe point to a page with the menu and the second iframe embedded in it, and when you click on an option it takes you to a different page with one of the menu options styled and the appropriate linked page dropped into the second iframe. Kind of gets the effect, but again is a kludge as you'd have to code multiple pages with the different menu options styled individually on each page, rather than having a single page with some integrated solution (probably in JS I'm guessing, at this point)...Best,~MG

[thescientist]

iframes within iframes, oh my! I think jkloth and I's recommendation for using Javascript, to change the selected elements class, might be a whole lot easier.