Навигация по Javascript / jQuery на основе URL-пути

Question

Следующий код представляет собой меню вертикальной навигации в HTML / CSS / Javascript ... Внешний вид в основном создается с помощью UL / LI и CSS-идентификаторов / классов ... Также важно упомянуть, что эта навигация является включением файл ...

Так вот в чем моя проблема ... По сути, я знаю, что этот Javascript - это действительно простой / начинающий способ заставить это делать то, что я хочу. Мне было интересно, есть ли какой-нибудь jQuery или другой способ упростить этот код. Что должно произойти, так это то, что URL-адрес браузера должен быть вызван и разделен, чтобы он распознавал путь и отображал правильный NAV и sub-nav в зависимости от того, какая страница (или / path) отображается в данный момент.

Это может помочь в дальнейшем объяснить мои потребности / желания: Я хочу упростить этот код, чтобы мне не нужно было создавать кучу разных идентификаторов и классов для LI и писать так много 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 обрабатывал ваш поиск с помощью селекторов.

Предполагая, что ваш тег привязки содержит фактический 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>

И вы используете селектор с проанализированным 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");

Вы также можете получить доступдругие элементы, относящиеся к этому якору, с различными селекторами, например,

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");

ИВам также не нужно ссылаться на какой-либо элемент напрямую по идентификатору с тего подход.

Answer 2

Я понимаю, что это не является прямым ответом на ваш вопрос, но, возможно, вы подумали бы об альтернативной последовательности мыслей.

Рассмотрите возможность нацеливания на активный пункт меню с идентификатором тела.Это немного чище, и в долгосрочной перспективе вы можете найти его более расширяемым / поддерживаемым.

Пример 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, чтобы подделать «>>» (создание фонового изображения было бы самым простым).

Answer 3

Это интересно ~

У меня есть простая идея для вас .. Однако я считаю, что идея от Люка - мое идеальное решение

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');

Answer 4

Сохраняя логику разделения URL-адресов как есть, вы можете использовать JQuery для поиска элемента и применения класса css и т. Д. Для упрощения вашего кода. В зависимости от ваших требований используйте соответствующие селекторы и присвойте элементу класс и другие свойства.