How to focus a div automatically on page load

Question

I have this code....

  <div id="details">
                    <nav>
                            <a href="#1"><span>Summary</span></a>
                            <a href="#2"><span>Personal</span></a>
                    </nav>
                </div>

        <div id="1" class="navLinks"> <?php include 'includes/i_includes/summary.php';?> </div>
        <div id="2" class="navLinks"> <?php include 'includes/i_includes/info.php';?> </div>

and then I also have this script

<script type="text/javascript">

        $('nav a').click(function() {

          $('.navLinks').hide();
          $(this.getAttribute('href')).show()
        });


        </script>

I would like to make so on page load... the content of Summary is automatically shown..

use window.location.hash = '#details'; – user202 Dec 29 '15 at 16:44 — user202, Dec 29 '15 at 16:44

Mohamed-Yousef · Answer 1 · 2015-12-29T16:53:27.380

3

you can use .filter().click()

$('nav a').click(function() {
     $('.navLinks').hide();
     $(this.getAttribute('href')).show()
}).filter('[href="#1"]').click();

Working Demo

or you can use .eq().click();

$('nav a').click(function() {
    $('.navLinks').hide();
    $(this.getAttribute('href')).show()
}).eq(0).click();

Working Demo

edited Dec 29 '15 at 16:53

answered Dec 29 '15 at 16:45

Mohamed-Yousef

23,946
3
19
28

First one is working now with the HREF added in. Thanks. – Kmiles1990123 Dec 29 '15 at 16:50
@Kmiles1990123 glad it helped .. Good Luck :) – Mohamed-Yousef Dec 29 '15 at 16:54

score 0 · Answer 2 · edited May 23 '17 at 12:15

0

Use this sricpt:

$(document).ready(function() {
 $("#yourdivid").show();
 });

Check on Following Links:

Show div after 2 seconds of page load

Hide div with specific class while page is loading then show again after load

edited May 23 '17 at 12:15

Community

1
1

answered Dec 29 '15 at 17:02

Yagnik Detroja

921
1
7
22

How to focus a div automatically on page load

2 Answers2