Show li on page load

Question

I have

    <nav>
        <ul class="sel">
              <li>
                  <a href="#LINK1" data-title="A">A</a>
              </li>
              <li>
                  <a href="#LINK2"  data-title="B">B</a>
              </li>
              <li>
                  <a href="#LINK3" data-title="C">C</a>
            </li>
        </ul>
    </nav>
</header>

When the page loads I would like the <li> with <a href='#LINK1' data-title="A">A</a> to be selected and showing. I have tried multiple jQuery solutions and none have worked.

Is it possible to have this <li> containing this specific <a> show when the page loads?

I have many solutions such as:

Using jQuery to 'click' a li element

Click trigger on page load (UL > LI)

What have jQuery solution have you tried? – litel Mar 01 '17 at 22:18 — litel, Mar 01 '17 at 22:18
You could do this with plain CSS – j08691 Mar 01 '17 at 22:20 — j08691, Mar 01 '17 at 22:20

Malcolm McSwain · Answer 1 · 2017-03-02T17:32:30.330

1

Your HTML is invalid; the href attribute defines a target url for the <a> element to navigate to, but you were using it to define your id. Instead, the id should be applied to the <li> element you are trying to hide/show. Take a look at the example below, which hides the first <li> element if the other elements are clicked:

var display = function(pageHide,pageShow) {
  var current = "#DATA" + pageShow.toString();
  $(current).show();
  var last = "#DATA" + pageHide.toString();
  $(last).hide();
}; // hide/show pages.

$(document).ready(function() {
  var page = 1;         // set default page
  $('#DATA2').hide();   // hide others
  $('#DATA3').hide();
  $('#LINK1').click(function() {
    display(page,1);
    page = 1;
  });
  $('#LINK2').click(function() {
    display(page,2);
    page = 2;
  });
  $('#LINK3').click(function() {
    display(page,3);
    page = 3;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul class="sel">
    <li id="LINK1">
      <a data-title="A" href="#">A</a>
    </li>
    <li id="LINK2">
      <a data-title="B" href="#">B</a>
    </li>
    <li id="LINK3">
      <a data-title="C" href="#">C</a>
    </li>
  </ul>
  <p id="DATA1">main</p>
  <p id="DATA2">graphs</p>
  <p id="DATA3">notes</p>
</nav>

edited Mar 02 '17 at 17:32

answered Mar 01 '17 at 22:53

Malcolm McSwain

1,888
2
15
17

This is not working for me. The
contains an that links to a div that is displayed. I am trying to have this already displayed when the page loads and go away when another in an
is clicked. I couldn't figure out how to implement this with css only

Mike El Jackson

Mar 02 '17 at 02:23

@MikeElJackson Please take a look at the edited answer. Does this answer your question? – Malcolm McSwain Mar 02 '17 at 03:22

so A, B, and C are tabs on a dashboard. A corresponds to a main page, B corresponds to graphs, and C corresponds to a notes section. When the web page is loaded I want A, the main page, to show. But when I click the tab for B or C I want it to switch to the respective graphs or notes section. However, when I click the A tab again I want the main page to show. I have the tabs switching between each other but I can't get the A tab to show when the page loads. The code you have above removes A completely when BorC is selected, but I am trying to select A and then switch to B,C and then back to A – Mike El Jackson Mar 02 '17 at 05:45

right now when I load the webpage neither A nor B nor C show – Mike El Jackson Mar 02 '17 at 05:46

@MikeElJackson Ok, I get a basic sense of what you are trying to accomplish... take a look at the new code snippet. There is only one disadvantage to using this method, which is that if you press a link twice it will hide the current page, but it's a start. Is this what you were looking for? – Malcolm McSwain Mar 02 '17 at 17:34

score 0 · Answer 2 · answered Mar 02 '17 at 05:04

0

You can still use Pseudo selector using data-title and do whatever you want. I would also like to do something like:

$('ul li').filter(function(index){});

$(function() {
  $('ul li a[data-title=A]').each(function() {
    $(this).parent().css('background-color', '#0000ff');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <ul class="sel">
    <li>
      <a href="#LINK1" data-title="A">A</a>
    </li>
    <li>
      <a href="#LINK2" data-title="B">B</a>
    </li>
    <li>
      <a href="#LINK3" data-title="C">C</a>
    </li>
  </ul>
</nav>

answered Mar 02 '17 at 05:04

jagdish.narkar

317
1
7

hmm this did not work for me I tried .css('display','block') – Mike El Jackson Mar 02 '17 at 05:54
All those are already visible, why you would set display property to block? Can you put your code in fiddler and show me? – jagdish.narkar Mar 02 '17 at 13:53

Show li on page load

2 Answers2