Display the list items when the page first loads

Question

Display the list items when the page first loads

I currently have this code snippet:

    <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>

My goal is to have the <li> element with

<a href='#LINK1' data-title="A">A</a>

automatically selected and displayed when the page loads. I've experimented with various jQuery solutions, but none have yielded the desired result.

Is it feasible to have this specific <li> containing the specified <a> tag appear upon page load?

I have explored multiple solutions, including:

Using jQuery to 'click' a li element

Click trigger on page load (UL > LI)

javascript jquery html css

Answer 1

Answer №1

Your HTML code contains errors; the href attribute is intended to specify the target URL for the <a> element to navigate to, not to define an ID. Instead, the ID should be assigned to the <li> element that you want to hide or show. Refer to the example below, where the first <li> element is hidden when other elements are clicked:

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

$(document).ready(function() {
  var page = 1;         // Set default page
  $('#DATA2').hide();   // Hide other elements
  $('#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>

Answer 2

Your HTML code contains errors; the href attribute is intended to specify the target URL for the <a> element to navigate to, not to define an ID. Instead, the ID should be assigned to the <li> element that you want to hide or show. Refer to the example below, where the first <li> element is hidden when other elements are clicked:

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

$(document).ready(function() {
  var page = 1;         // Set default page
  $('#DATA2').hide();   // Hide other elements
  $('#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>

Answer 3

Answer №2

If you want to utilize Pseudo selector with data-title, you have the freedom to customize as needed. An example of this can be seen below:

$('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>

Answer 4

If you want to utilize Pseudo selector with data-title, you have the freedom to customize as needed. An example of this can be seen below:

$('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>

Display the list items when the page first loads

Answer №1

Answer №2

Similar questions

JavaScript code to retrieve and store data from API endpoints

Displaying svg files conditionally in a react native application

What is the most effective way to reset the v-model in the child component using the parent component?

Utilizing Angular 6 and JavaScript to invoke two functions within an (ngClick) event in both the Component and JavaScript

Leveraging JsonResult in combination with jQuery

What is the best way to retrieve the value from a React Img element?

Determining the number of columns and rows within an HTML table

Difficulties encountered when attempting to use a background image for shadow effects within a CSS design

Unit testing controllers in AngularJS with Karma often involves setting up mock services to simulate dependencies

Arranging array elements by both date and alphabetical order using Javascript

The implementation of display flex is causing issues with the material-ui grid layout

Chrome browser alignment problems

How can I extract the value from the object returned by an AJAX call?

In my Ionic/Angular project, I'm attempting to showcase two columns side by side in a row. However, the layout seems to be stacking them on top of each other with the

Expandable Checkout Form for Woocommerce

Different Ways to Access an Array in an EJS Template

Using JavaScript in conjunction with IPFS to verify the 404 status from localhost:8080 and identify if the local IPFS node is active within a browser user script

Analyzing text with improperly defined attributes

What is the best way to eliminate YouTube recommended videos that appear at the conclusion of my video?

What is the proper way to reference a computed symbol that has been inherited as a function in an extended class