How to Change Css coding with a link [closed]


Tags: javascript,jquery,html,css

Problem :

I was wondering if it is possible to change CSS with a link. What I'm trying to do is I want to change the display:none so it shows the page and hides another so it looks like your going to another page but it's already been loaded. Is it possible?

If it's possible with JavaScript or jQuery, how do I put it in HTML?

Can OnClick change display:none to display:block?



Solution :

You could use :target pseudo-class I think.

You could something like this:

<a href="#books">Show books</a>
<a href="#tv">Show TV</a>

<section id="books"></section>
<section id="tv"></section>

And CSS:

section {
  display: none;
}

*:target {
  display: block;
}

There are a few good examples on https://developer.mozilla.org/en-US/docs/Web/CSS/:target

But I think, is most cases, using JavaScript would be a better solution.

Edit: added universal selector like Alexxus suggested.


    CSS Howto..

    How to style a “list item > link” in jquery mobile

    How do I make a container div only overflow horizontally without using “display:inline-block” for its inner divs?

    How to use CSS in html table inside javascript

    How can I use Modernizr to get border-radius working in IE8?

    How to figure out what is going on with this nice CSS horizontal menu? [closed]

    How to set animation in css?

    How to implement block style for list

    How to insert javascript function in css link tag

    How to create multiple spoiler buttons

    Howto include application css into mailer views in Rails 3.1

    CSS: How to increase distance between two elements?

    how to center perfectly image and text inline in the center of page

    How to push elements after absolute element

    Jquery Hashtag link system (show what page the user is on)

    How to automatically compile LESS into CSS on the server?

    How to get an input set to display block to fade in with css

    Want to override Bootstrap, but how to avoid the use of !important?

    How to apply css to iframe content? [closed]

    CSS Cascading takes over inheritance, how to solve this?

    css book on css box model, how block element width can get affected etc

    How to get element position relative to parent?

    How to align logo and text in bootstrap on small screens?

    Overlay image to show like panorama [closed]

    How to reposition my jQuery popup?

    How to assign a class or ID to a table within a JavaScript function?

    How do I get rid of the big margin between my labels and the input fields?

    How to move this button?

    How can I remove dependancies that are non existent or not being called on by any document?

    How to eliminate the overlap border using CSS only

    How can I specify a *.css file in an ASP.NET UserControl?