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 can the top DIV from two stacking DIVs affect the other's height

    How to combine bold and italic in CSS?

    How to make arrow in CSS with angle?

    How to center this on screen

    How to preload css :hover background images

    How to get all select element in JQuery

    PrimeFaces: how to override CSS class

    How to use CSS to make images in multiple li of one ul align by bottom edge?

    How to make smooth animation in css?

    How do I prevent child affected for transform scale in css3?

    how to set responsive background-image of element using css?

    a div with height:1px appears very thicker in internet explorer 6. How to reduce it?

    Show/Hide function between JS, CSS, and HTML

    How to place a div below another div?

    Show an image from b&w to color as if it were loading (left to right)

    How to achieve this gradient using valid HTML & CSS only

    How to pull all CSS rules on an element together

    JavaScript: How to add 'word-wrap' style to element

    HTML/CSS How to make menu slide up when menu item is clicked?

    How do I make effect like this on image hover?

    How is possible to get 2d transformation css vertical way

    How to access lower children using > operator?

    How do I let a div fill in the blank space

    how to apply css property to my first div class only

    How can I make the text stop moving when one DIV opens?

    Smarty / How to include PHP function to compress CSS file

    How to disable .less (dotLess CSS) syntax analysis in ReSharper 6?

    How to change Kendo Excel Button Content Text

    How to apply different css style to gwt datagrid widget in the same page? [duplicate]

    How to provide responsive design for svg?