Is there an on click event without using JavaScript? [duplicate]

Question

I have this code:

CSS:

.tab div {
    display: none;
}

.tab div:target {
    display: block;
    position: absolute;
    top: 20px;
    z-index: 999;
}
.c {
    position: absolute;
    top: 30px;
    width: 20px;
    height: 20px;
    background: yellow;
    z-index: 1;
}

BODY:

<div class="tab">

<a href="#link1">Link 1</a>   
<a href="#link2">Link 2</a>
<a href="#link3">Link 3</a>

<div id="link1">
  <h3>Content to Link 1</h3>
  <p>Hello World!</p>
</div>

<div id="link2">
  <h3>Content to Link 2</h3>
  <h4>Great success!</h4>
</div>

<div id="link3">
  <h3>Content to Link 3</h3>
  <p>Yeah!</p>
</div>

<div class="c" style="display:block"></div>
</div>

https://jsfiddle.net/z9v4py3c/

I am thinking is there an any way: when I click on "a element", div with "c" class disappear. I tried a lot of options, but I am not a CSS expert. In this code "input element" cannot appear or JavaScript. I will be very thankful for help.

mwl · Accepted Answer · 2015-09-06 23:27:38Z

1

Just copy and move div.c to id="link#": https://jsfiddle.net/z9v4py3c/1/

answered Sep 6, 2015 at 23:27

mwl

1,47814 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kureva Over a year ago

Thank you for answer but when I enter on the website I want to "yellow div" be visible.

Dom · Accepted Answer · 2015-09-07 04:41:50Z

0

The only way I could find to do this was to fake it.

CSS: Only target the parent divs inside .tab and make the background white.

.tab > div {
    display: none;
    background:white;
}

HTML: Wrapped c in spans

<span><div class="c" style="display:block"></div></span>

Now when a link is active it simply hides the yellow under the white.

See my Fiddle

answered Sep 7, 2015 at 4:41

Dom

2,0951 gold badge14 silver badges19 bronze badges

Collectives™ on Stack Overflow

Is there an on click event without using JavaScript? [duplicate]

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related