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>

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

页面加载时是否可以让此<li>包含此特定<a>节目？

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

Using jQuery to 'click' a li element

Click trigger on page load (UL > LI)

Answer 1

您的HTML无效; href属性定义了<a>元素导航到的目标网址，但您使用它来定义您的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>

Answer 2

你仍然可以使用数据标题的伪选择器，并做任何你想做的事情。我也想做点什么：

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

在页面加载时显示li

2 个答案: