All geek questions in one place

Change the contents of the div by clicking the button outside the div, but set one of the content as visible before clicking

Hi everyone, thanks for reading this post.

I follow my previous question: how to change the contents of a div by clicking a button outside the div. Now I can successfully change the contents by clicking the button.

However, before clicking anything, the div where the content should be displayed is completely empty. I do not want it to be empty. Instead, I want him to show something before clicking something. Actually, I want it to show content for button one.

How do I achieve this?

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>

Your help is much appreciated! THANKS!

+2
source share
1 answer

You hide all divs on page load with $('.textword_about').hide();

You need to show the first, replace this line with the following

 $('.textword_about').hide(); $('.textword_about:first-child').show();
+4
source

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

More articles:


All Articles