在页面加载时显示 li

Question

我有

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

当页面加载时，我希望选择并显示带有<a href='#LINK1' data-title="A">A</a> 的<li>。我尝试了多种 jQuery 解决方案，但都没有奏效。

是否可以在页面加载时显示包含此特定 <a> 的 <li>？

我有很多解决方案，例如：

Using jQuery to 'click' a li element

Click trigger on page load (UL > LI)

Answer 1

您的 HTML 无效； href 属性为要导航到的 <a> 元素定义了一个目标 url，但您使用它来定义您的 id。相反，应将 id 应用于您尝试隐藏/显示的 <li> 元素。看看下面的例子，如果点击其他元素，它会隐藏第一个 <li> 元素：

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>