正在从 javascript 中的 URL 检索 ID 参数

Question

我正在寻求一些帮助，尝试使用 JavaScript 从 URL 检索 ID。我有一个主菜单系统，看起来像这样

<section id="menu">
 <ul id="main">
  <li id="first"><a href="index.html">Home</a></li>
  <li><a href="Tables.html">League Tables</a><span class="darrow">&#9660;</span>
  <ul class="sub1">
    <li><a href="Tables.html?id=DivP">Premier Division</a></li>
    <li><a href="Tables.html?id=Div1">Division 1</a></li>
    <li><a href="Tables.html?id=Div2A">Division 2A</a></li>
    <li><a href="Tables.html?id=Div2B">Division 2B</a></li>
    <li><a href="Tables.html?id=Div2C">Division 2C</a></li>
    <li><a href="Tables.html?id=Div2D">Division 2D</a></li>
  </ul>
  </li>
 <li><a href="Fixtures.html">Fixtures/Results</a></li>                  
 <li><a href="ClubContacts.html">Club Contacts</a></li>
 <li><a href="TalkinBaws.html">Talkin' Baws</a></li>
 <li><a href="ContactUs.html">Contact Us</a></li>
</ul>
</section>

在表格页面中，我已经有一些 JavaScript（代码添加在末尾）运行使用 document.ready() 隐藏了 1 - 2D 的所有分区并仅显示总理。在表格页面上，我添加了第二个菜单列表，它根据用户使用 ID 和 JavaScript

中的 .hide()/.show() 选择显示和隐藏分区

<ul>
 <li><a href="#" id='showDivP'>Premier Division</a></li>
 <li><a href="#" id='showDiv1'>Division 1</a></li>
 <li><a href="#" id='showDiv2A'>Division 2A</a></li>
 <li><a href="#" id='showDiv2B'>Division 2B</a></li>
 <li><a href="#" id='showDiv2C'>Division 2C</a></li>
 <li><a href="#" id='showDiv2D'>Division 2D</a></li>
</ul>

此列表使用 .click()，但我遇到的问题是我希望页面加载所需的分区，具体取决于从主菜单中所做的选择。

例如，如果用户在主页上并试图通过主菜单直接进入 Division 2B，我想知道如何从 URL 中的锚标记获取 ID（ a href="Tables.html?id=Div2B") 以便在加载页面时显示正确的分区。

这是 JavaScript 我已经:

$("document").ready(function()
{

$('#DivP').show();
$('#Div1').hide();
$('#Div2A').hide();
$('#Div2B').hide();
$('#Div2C').hide();
$('#Div2D').hide();

$('#showDivP').click(function()
{
    $('#DivP').show();
    $('#Div1').hide();
    $('#Div2A').hide();
    $('#Div2B').hide();
    $('#Div2C').hide();
    $('#Div2D').hide();
});

$('#showDiv1').click(function()
{
    $('#DivP').hide();
    $('#Div1').show();
    $('#Div2A').hide();
    $('#Div2B').hide();
    $('#Div2C').hide();
    $('#Div2D').hide();
});
$('#showDiv2A').click(function()
{
    $('#DivP').hide();
    $('#Div1').hide();
    $('#Div2A').show();
    $('#Div2B').hide();
    $('#Div2C').hide();
    $('#Div2D').hide();
});
$('#showDiv2B').click(function()
{
    $('#DivP').hide();
    $('#Div1').hide();
    $('#Div2A').hide();
    $('#Div2B').show();
    $('#Div2C').hide();
    $('#Div2D').hide();
});
$('#showDiv2C').click(function()
{
    $('#DivP').hide();
    $('#Div1').hide();
    $('#Div2A').hide();
    $('#Div2B').hide();
    $('#Div2C').show();
    $('#Div2D').hide();
});
$('#showDiv2D').click(function()
{
    $('#DivP').hide();
    $('#Div1').hide();
    $('#Div2A').hide();
    $('#Div2B').hide();
    $('#Div2C').hide();
    $('#Div2D').show();
});


});

如果这是一个重复的问题，我深表歉意，但我还没有找到我可以理解和使用的明确答案。

感谢您的帮助

Answer 1

获取被点击的锚点的 id 属性...

$('a').on('click', function(){
    var id = $(this).attr('id');
    console.log(id);
});

要从 href 属性获取 id...

$('a').on('click', function(){
    var href = $(this).attr('href');
    var id = href.split('id=')[1];
    console.log(id);
});

Answer 2

要获取 jquery 中 url 的 GET 参数，您可以使用以下函数：

在此博客上找到：here, and this question: Get url parameter jquery Or How to Get Query String Values In js。

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
};

这就是你如何在你的案例中使用这个功能，
Tables.html?id=Div2B。

var id = getUrlParameter('id');

正在从 javascript 中的 URL 检索 ID 参数

Retrieving ID parameter from URL in javascript

html

javascript

jquery

jquery-events