Question

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

所以这是我的问题......基本上，我知道这个Javascript是一个非常基本/初学的方式来实现我想做的事情。我想知道是否有一些jQuery或其他方法来简化这段代码。需要做的是需要调用和拆分浏览器的URL，以便识别路径并显示正确的NAV和子导航，具体取决于当前正在显示的页面（或/路径）。

这可能有助于进一步解释我的需求：我想简化这段代码，所以我不必为LI制作大量不同的ID和类，并且必须编写这么多的javascript。在jQuery中没有办法通过URL找到当前页面，如果它是最新的，我希望包含的导航菜单中的那部分是粗体并插入一个»或箭头来表示该页面是最新的。 / p>

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

//$(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用选择器处理你的搜索。

假设您的锚标记包含实际的URL - 由于您似乎有一些不完整的/伪代码HTML（例如“＃”，“＃LINKHERE”等），所以不清楚 - 您可以直接搜索href，例如

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

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

假设您有这样的结构：

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

您使用带有解析网址的选择器：

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

现在你有了一个应用你的CSS的起点。

假设您要添加＆gt;＆gt;符号，然后：

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

假设您要添加一些类：

currentAnchor.addClass("active");

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

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直接引用任何元素。

Answer 2

我意识到这不是直接回答你的问题 - 但也许你可以考虑另类思路。

考虑使用正文ID定位活动菜单项。它有点清洁，从长远来看，你可能会发现它更具可扩展性/可维护性。

示例HTML：

<body id="home>
...
<ul class="nav"
  <li class="home"><a>Home</a</li>
  <li class="about"><a>About</a</li>
</ul>

CSS：

li.home, li.about {font-weight: normal}
#home li.home, #about li.about {font-weight: bold}

您可以使用CSS技巧来欺骗“＆gt;＆gt;” （创建背景图像将是最简单的。）

Answer 3

保持url拆分逻辑，你可以使用JQuery查找元素并应用css类等来简化你的代码。根据您的要求，使用适当的选择器并将类和其他属性设置为元素。

Answer 4

那很有意思〜

我对你有一个简单的想法..但是，我认为卢克的想法是我理想的解决方案

HTML：

<ul id='menu'>
    <li><a href='link1' id='default_item' level='1'>item 1</a></li>
    <li><ul><li>
        <a href='link2' level='2'><div>sub item 1</div></a>
        <a href='link3' level='2'><div>sub item 2</div></a>
        </li></ul>
    </li>
    ...
</ul>

JAVASCRIPT：

var url = window.location.href; 
// changing something link http://www.google.com/search?blabla=foo
// into "search?blabla=foo"
// that is sort-of normalisation
url = url.replace(/^\w+\:\/\/[^\/]+?\//, '', url);

$currA = $('#default_item');
$('#menu').find('a').each(function(){
    // getting the href of current 'a' element
    var lnk = $(this).attr('href');
    // also normalise your href 
    lnk = lnk.replace(/^\w+\:\/\/[^\/]+?\//, '', lnk);

    // well, we get the current a ~!
    if(lnk == url){
        $currA = $(this);
    }
}

if($currA.attr('level') == 1){
    var $li = $currA.parents('li:eq(0)');
} else {
    // manipulating your sub-item
    $currA.addClass('active')
    .find('div').css('display', 'block');

    // getting the level-one li element
    $li = $currA.parents('li:eq(1)');
}

// manipulating your menu items
$li.addClass('nav_selected')
.next().css('display', 'block');

基于URL路径的Javascript / jQuery导航

4 个答案: