基于 URL 路径的 Javascript/jQuery 导航

Question

以下代码是 HTML/CSS/Javascript 中的垂直导航菜单...外观主要由 ul/li 和 CSS ids/classes 制作...同样重要的是要提及此导航是一个包含文件...

所以这是我的问题...基本上，我知道这个 Javascript 是一个非常基本的/初学者的方式来让它做我想做的事。我想知道是否有一些 jQuery 或其他方法可以简化这段代码。需要发生的是浏览器的 URL 需要被调用和拆分，以便它识别路径并根据当前显示的页面(或/path)显示正确的 NAV 和子导航。

这可能有助于进一步解释我的需要/想要: 我想简化这段代码，这样我就不必为 LI 创建大量不同的 ID 和类，也不必编写那么多的 javascript。 jQuery 中有没有一种方法可以通过 URL 找到当前页面，如果它是当前页面，我希望包含的导航菜单的那部分是粗体并插入一个 » 或箭头来表示该页面是当前页面。

类似这样的东西，但不完全是……你能给我一些更容易解释的东西吗……

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

      //  $('li#current a:eq(0)').html("» " + $('li#current a:eq(0)').html());

    //});

我的代码在下面...我希望有一种方法可以帮助我!谢谢!

<!-- Left Navigation starts here -->
            <!-- if IE -->
            <div id="IE_nav">
            <!-- endif IE -->
            <div id="left_nav">
                <ul>
                    <a href="http://www.smilesofomaha.com/_dev/general/"><li id="main_nav_1" class="nav_button">MAIN NAV BUTTON</li></a>
                                <li class="sub_nav_box" id="main_1" style="display: none;">
                                    <ul>
                                    <li id="link1" class="not_active"><a href="#LINKHERE"><div id="raquo1" class="raquo"><img src="../../images/pip_arrow.png" border="0"/></div>SUB NAV-ITEM HERE</a></li>
                                    <li id="link2" class="not_active"><a href="#LINKHERE"><div id="raquo2" class="raquo"><img src="../../images/pip_arrow.png" /></div>SUB NAV-ITEM HERE</a></li>
                                    </ul>
                                </li>
                    <a href="http://www.smilesofomaha.com/_dev/cosmetic/"><li id="main_nav_2" class="nav_button">MAIN NAV BUTTON 2</li></a>
                                <li class="sub_nav_box"  id="main_2" style="display: none;">        
                                    <ul>
                                    <li id="link3" class="not_active"><a href="#"><div id="raquo3" class="raquo"><img src="../../images/pip_arrow.png" border="0"/></div>SUB NAV-ITEM HERE</a></li>
                                    <li id="link4" class="not_active"><a href="#"><div id="raquo4" class="raquo"><img src="../../images/pip_arrow.png" border="0"/></div>SUB NAV-ITEM HERE</a></li>
                                    </ul>
                                </li>

<script type="text/javascript">

var url = window.location.href; 
url = url.split('/');

if (url[4] == "MAIN NAV BUTTON 1")
 {
  document.getElementById("main_1").style.display = 'block';
  document.getElementById('main_nav_1').className = 'nav_selected';

    if(url[5] == "URL PATHNAME SUB NAV-ITEM") {
        document.getElementById("link1").className = 'active';
        document.getElementById("raquo1").style.display = 'block';
    }

    if(url[5] == "URL PATHNAME FOR SUB NAV-ITEM") {
        document.getElementById("link2").className = 'active';
        document.getElementById("raquo2").style.display = 'block';
    }
 } 

if (url[4] == "URL PATH FOR MAIN NAV BUTTON 2")
{
  document.getElementById("cd").style.display = 'block';
  document.getElementById('cd_nav').className = 'nav_selected';

    if(url[5] == "URL TO PATHNAME FOR SUB NAV-ITEM") {
        document.getElementById("link3").className = 'active';
        document.getElementById("raquo3").style.display = 'block';
    }


        if(url[5] == "URL TO PATHNAME FOR SUB NAV-ITEM") {
            document.getElementById("link4").className = 'active';
            document.getElementById("raquo4").style.display = 'block';
        }

    }
</script>

Answer 1

假设我没有在某处误解你:你可以让 jQuery 使用选择器来处理你的搜索。

假设您的 anchor 标记包含实际的 URL——它不清楚，因为您似乎有一些不完整/伪代码的 HTML(例如“#”、“#LINKHERE”等)——您可以直接搜索 href，例如

$("a[href=" + url + "]")

将选择具有指定 URL 的 anchor 标记。

假设您有这样的结构:

<ul>
    <li><a href="/apple/oranges/3">Some link</li>
    <li><a href="/apple/banana/4">Another link</li>
</ul>

然后您将选择器与已解析的 URL 一起使用:

var parsedUrl = "/apple/orange/3"; // I've used a string here for clarity
var currentAnchor = $("a[href=" + parsedUrl + "]");

现在您有了应用 CSS 的起点。

假设你想在你的 >> 符号中添加，然后:

currentAnchor.text(">>" + currentAnchor.text())

假设你想添加一些类:

currentAnchor.addClass("active");

您还可以使用各种选择器访问与此 anchor 相关的其他元素，例如

currentAnchor.parents("li").css("display", "block");

所以你最终可以得到一个通用的代码块，而不是你拥有的巨型怪物:

var parsedUrl = "/apple/orange/3"; // I've used a string here for clarity
var currentAnchor = $("a[href=" + parsedUrl + "]");
currentAnchor.addClass("active");
currentAnchor.parents("li").css("display", "block");

而且您也不需要使用这种方法直接通过 id 引用任何元素。