Javascript, разбор URL, манипулирование строками, навигация

Question

Ниже приведен скрипт для меню вертикальной навигации, которое я создал в HTML / CSS / Javascript. Вы заметите, что навигационные меню создаются с использованием списков (ul & li's) ...

Мой вопрос такой ...

Я хочу, чтобы каждая ссылка была жирной и отображалась "перед ней, когда она находится на этой странице.

С помощью Javascript, как я могу это сделать? На каждой странице есть папка, очень похожая на ссылку (например, в подпункте 1 будет указан путь sitename.com/path/sub-item-1)...

Я предполагаю, что могу каким-то образом захватить URL (что я уже сделал в коде), каким-то образом получить строку из ссылки ... и затем снова вставить строку, но добавить к ней "и".

РЕДАКТИРОВАТЬ: Я ДОЛЖЕН НАМЕРИТЬ ... Эта навигация является включением, которое включает все мои страницы, поэтому добавление жирного шрифта и "вручную на каждом документе не является возможным решением для этого вопроса.

Спасибо за вашу помощь!

    <!-- Left Navigation starts here -->
            <!-- if IE -->
            <div id="IE_nav">
            <!-- endif IE -->
            <div id="left_nav">
                <ul>
                    <a href="#"><li id="nav_1" class="nav_button">NAV ITEM 1</li></a>
                                <li class="sub_nav_box" id="sub-nav-1" style="display: none;">
                                    <ul>
                                    <li><a href="#">Sub-Item 1</a></li>
                                    <li><a href="#">Sub-Item 2</a></li>
                                    </ul>
                                </li>
                    <a href="#"><li id="nav_2" class="nav_button">NAV 2</li></a>
                                <li class="sub_nav_box"  id="sub-nav-2" style="display: none;">     
                                    <ul>
                                    <li><a href="#">Sub-Item 1</a></li>
                                    <li><a href="#">Sub-Item 2</a></li>
                                    </ul>
                                </li>
                                    </ul>
            </div></div>

            <script type="text/javascript">

    var URL = window.location.protocol + "://" + window.location.host + "/" + window.location.pathname;

    var pathArray = window.location.pathname.split('/');

if (pathArray[2] == "nav_1")
 {
  document.getElementById("#").style.display = 'block';
  document.getElementById('#').className = 'nav_selected';
 } 

if (pathArray[2] == "nav_2")
{
  document.getElementById("#").style.display = 'block';
  document.getElementById('#').className = 'nav_selected';
}
</script>

По сути, вы можете игнорировать то, что у меня есть (поскольку оно работает так, как мне нужно), но как я могу поставить "перед ссылками на подпункты и сделать их жирными ... Используя javascript.

Еще раз спасибо!

Answer 1

Когда у вас есть другая страница в каждой папке. Возможно, у вас есть еще один файл для каждой страницы. Таким образом, вы можете вручную добавить класс к определенному элементу навигации в каждый файл в каждой папке?

Предполагается, что вы не используете PHP или что-то еще, чтобы "включить" страницы в основной макет / индекс.

Когда вы используете что-то, чтобы включить (в данном случае сама навигация):

Вы можете разделить URL-адреса косыми чертами /. Как и в вашем сценарии, но там есть ошибки. Вот что-то лучше:

URL: http://site.ext/path/sub-item-1/

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

/*
4 because:
0 = http:
1 = <nothing between the two slashes>
2 = site.ext
3 = path
4 = sub-item-1/
*/

document.getElementById(url).className = 'active';

Скажем, вы используете PHP:

Вы можете добавить фрагмент PHP к каждому элементу навигации и отобразить там класс. Тогда у вас никогда не возникнет проблем с JavaScript на стороне клиента.

<li<?php echo ($_GET['page'] == 'sub-item-1' ? ' class="active"' : ''); ?>>Sub Item 1</li>

Для выделения текста жирным шрифтом и добавления »:

Вам придется сделать это с помощью CSS:

li.active {
    font-weight: bold;
}
li.active:before {
    content: "» ";
}