All geek questions in one place

How to change the contents of a div by clicking a button outside the div?

Thanks for taking the time to read this post. I hope that those who ask the same question will also receive answers.

I am working on a single page website divided into 8 large divs, so when you click on the menu bar you will be taken to one of the div (or "pages").

On one of the sections (or pages) that is part of the section of my website, I try to present this effect: http://jsfiddle.net/unbornink/LUKGt/

I have a number of buttons, for example. "Who we are", "What we do", "How we think" .... and I have a div under this row of buttons, where different texts are displayed when you click on different buttons.

I tried to follow all the steps suggested by http://jsfiddle.net/unbornink/LUKGt/ . Sorry, I can not start the button.

Here is the code of my work:

<head> <link href="textContainer.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <style type="text/css"> <------I put these in CSS style sheet. .textWord_about{ position: absolute; font-family: Calibri; font-size: 14px; top: 22px; left: 29px; width: 650px; height: 390px; text-align: left; background-image: url(images/slider_bkgd.png); background-repeat: repeat; } .textContainer_about { position: absolute; top: 870px; left: 234px; width: 727px; height: 452px; z-index: 20; color: rgb(4,4,4); display: block; background-image: url(images/slider_bkgd.png); background-repeat: repeat; overflow: visible; } .links { font-family: Calibri; font-size: 14px; } </style> </head> <body> <div id="menu_about"> <a class="link" href="#about" data-link="first">&nbsp;&nbsp; Why We Exist</a> &#8226; <a class="link" href="#about" data-link="second">Who We Are</a> &#8226; <a class="link" href="#about" data-link="third">What We Do</a> &#8226; <a class="link" href="#about" data-link="fourth">How We Think</a> &#8226; <a class="link" href="#about" data-link="fifth">Where We Are Going</a> </div> <div id="pages_about" class="textContainer_about"> <div class="textWord_about" data-link="first"> <p>ffffffffffffffffffffffffffff</p> </div> <div class="textWord_about" data-link="second"> <p>ffffffffffffffffffffffffffff</p> </div> <div class="textWord_about" data-link="third"> <p>ffffffffffffffffffffffffffff</p> </div> <div class="textWord_about" data-link="fourth"> <p>ffffffffffffffffffffffffffff</p> <p>ffffffffffffffffffffffffffff</p> <p>ffffffffffffffffffffffffffff</p> <p>ffffffffffffffffffffffffffff</p> <p>ffffffffffffffffffffffffffff</p> </div> <div class="textWord_about" data-link="fifth"> <p>ffffffffffffffffffffffffffff</p> </div> </div> <script type="text/javascript"> $('.textword_about').hide(); $('.link').click(function() { $('.textword_about').hide(); $('.textword_about[data-link=' + $(this).data('link') + ']').fadeIn({ width: '200px' }, 300); });​ </script>

Please suggest a solution! VERY EVALUATED!

+4
source share
3 answers

There is a typo in your selector. Change textword_about to textword_about [Note the letter W in textword_about ]

Fixed code: http://jsfiddle.net/LUKGt/5/ (without stylesheets)

Code:

 $('.textWord_about').hide(); $('.link').click(function() { $('.textWord_about').hide(); $('.textWord_about[data-link=' + $(this).data('link') + ']').fadeIn({ width: '200px' }, 300); });​
+8
source

You do not need to use JavaScript to do this if your target audience uses browsers that support the :active pseudo-class.

Pure CSS Version

+3
source

I think the main thing is that you would not notice or go missing,

 You are using 'textword_about' instead of 'textWord_about'. ie you are using 'textWord_about' in html and 'textword_about' in javascript.

Try to make them the same. Support both values ​​in html and javascript.

0
source

Source: https://habr.com/ru/post/1438969/

More articles:


All Articles