Javascript, разбор URL, условный CSS style.display в меню навигации - PullRequest
Новая
       9

Javascript, разбор URL, условный CSS style.display в меню навигации

1 голос
/ 11 июня 2011

Хорошо, поэтому по какой-то причине мой код здесь не работает ... Это вертикальное меню навигации HTML / CSS, созданное с помощью <ul> и <li> s ..... у каждого элемента списка есть под-навигация, которая отобразит другой список. По сути, я хочу, чтобы код читал текущий URL-адрес и условно скрывал (display: none) суб-навигации, которые не относятся к указанному URL-адресу ...

Очевидно, я бы повторил этот код для каждого элемента навигации.

Почему, когда я спрашиваю идентификатор элемента на display:none, он не будет работать ... тьфу. Пожалуйста, помогите.

Пожалуйста, смотрите прикрепленный. Спасибо! 

    <script type="text/javascript">
    var URL = window.location.protocol + "://" + window.location.host + "/" + window.location.pathname;

    var pathArray = window.location.pathname.split('/');
    document.write(URL);
        document.write("<br/>");
    document.write(pathArray[1]);
        document.write("<br/>");
    document.write(pathArray[2]);
        document.write("<br/>");
    document.write(pathArray[3]);
        document.write("<br/>");
    if (pathArray[2] == "general")
     {
      document.getElementById("cd").style.display = 'none';
        document.getElementById("id").style.display = 'none';
          document.getElementById("sd").style.display = 'none';
         } 


</script>

    <!-- Left Navigation starts here -->
            <!-- if IE -->
            <div id="IE_nav">
            <!-- endif IE -->
            <div id="left_nav">
                <ul>
                    <a href="#"><li class="nav_button">NAV ITEM 1</li></a>
                                <li class="sub_nav_box" id="gd">
                                    <ul>
                                    <li><a href="#">Sub-Item 1</a></li>
                                    <li><a href="#">Sub-Item 2</a></li>
                                    </ul>
                                </li>
                    <a href="#"><li class="nav_button">NAV ITEM 2</li></a>
                                <li id="cd" class="sub_nav_box">        
                                    <ul>
                                    <li><a href="#">Sub-Item 1</a></li>
                                    <li><a href="#">Sub-Item 2</a></li>
                                    </ul>
                                </li>
                    <a href="#"><li class="nav_button">NAV ITEM 3</li></a>
                                <li class="sub_nav_box" id="id">
                                    <ul>
                                    <li><a href="#">Sub-Item 1</a></li>
                                    </ul></ul>
                            </div></div>

Ответы [ 2 ]

0 голосов
/ 12 июня 2011

Проблема в том, что DOM, на который вы просите JavaScript выполнить действия, не загружен во время выполнения. Я предлагаю разместить весь код JS: 

<script type="text/javascript">
window.onload=function()
{
   //HERE
}
</script>

Теперь, кроме этого, у вас есть другие проблемы.

1) Вы получаете два DIV, если браузер IE, и вам, вероятно, нужен только один. Вы также получите дополнительный закрывающий div, если это не IE, потому что отсутствует условие для оператора закрытия div if if.

<! - если IE ->


<! - endif IE ->

2) Согласно спецификациям HTML 4, XHTML и HTML5 элемент <ul> может содержать только элементы <li> как прямые дочерние элементы. Ваш <ul> содержит <a> элементов как прямых детей. Поместите тег <a> внутри <li>, который он в настоящее время переносит. Поменяйте местами.

3) <a> является встроенным элементом (если не установлено иначе с помощью CSS), тогда как <li> является элементом уровня блока (если не установлено иначе с помощью CSS). Вы не должны размещать элементы уровня блока внутри встроенных элементов, а наоборот. Исправление точки 2, также исправит точку 3.

Удачи.

0 голосов
/ 11 июня 2011

То есть вы пытаетесь получить доступ к некоторым элементам DOM, прежде чем они будут определены

Переместите ваш скрипт сразу после html, и он будет работать. 

<!-- Left Navigation starts here -->
......

затем ваш скрипт 

<script type="text/javascript">
    var URL = window.location.protocol + "://" + window.location.host + "/" +      window.location.pathname;
......

или для еще лучшего результата используйте событие dom ready для запуска вашего скрипта.Это может быть легко достигнуто с помощью jquery 

$(function () {
// your script here
...
});
...