Вкладка навигации остается определенного цвета

0

Я использую ASP.net и имею главную страницу, которая использует навигацию. Моя проблема заключается в том, что когда я нажимаю ссылку, она загружает другую страницу asp, но вкладка навигации не переключается на цвет щелчка, она возвращается к исходному цвету. Поскольку все страницы загружаются одинаково, я не могу просто использовать CSS, потому что страница перезагружается. Есть ли способ написать функцию javascript, которая сообщает странице, когда она загружается, чтобы отобразить цвет наведения и сохранить его там? Поскольку единственный HTML, который я использую, находится на главной странице, я не могу ничего переключить. Я уверен, что должен быть способ использования nth-child, но я не могу понять это. Что касается кода, то простой пример:

<div>
   <ul>
     <li>One</li>
     <li>Two</li>
     <li>Three</li>
   </ul>
</div>

Итак, как бы я получил вторую ссылку для переключения на цвет наведения при загрузке страницы?

  • 1
    Какую часть кода вы контролируете? Хотя не так сложно получить доступ ко второму <li> , было бы намного проще, если бы у вас было <li id="secondLink">Two</li> .
  • 0
    Вы должны установить класс для li открытой в данный момент страницы, что может выглядеть иначе. Вы можете сделать это, используя скрипт на стороне сервера или JavaScript.
Показать ещё 5 комментариев
Теги:

3 ответа

1

Прошло некоторое время с тех пор, как я играл с asp, поэтому у меня не будет точных условий, но я могу указать вам в правильном направлении.

Во-первых, на вашей главной странице добавьте уникальные идентификаторы ко всем вашим навигационным ссылкам. Это сделает тривиальным доступ к этим ссылкам на ваших конкретных страницах asp. Это помогает сделать это, потому что в противном случае трудно выбрать нужную ссылку. jQuery, такой как $("div ul li:nth-child('2')"), выберет второй li который является дочерним элементом ul который является дочерним элементом div, но это может произойти где угодно на вашей странице.

Как только вы это сделаете, предположим, что ваша панель навигации выглядит так:

<div>
   <ul>
     <li id="linkOne">One</li>
     <li id="linkTwo">Two</li>
     <li id="linkThree">Three</li>
   </ul>
</div>

Затем на странице, загружаемой при нажатии кнопки "Два", вам нужно добавить скрипт с обработчиком onLoad, который изменяет ссылку:

<script>
    document.onload = function() { $("#linkTwo").addClass("hover"); };
</script>

Это будет ждать загрузки документа (в противном случае вы можете попробовать изменить элемент, который еще не существует), а затем запустить функцию, которая находит определенный элемент с идентификатором "linkTwo" и добавляет к нему класс "hover" класса css.

Очевидно, что эта строка будет отличаться для каждой конкретной страницы asp - или что-то, что вы можете вычислить логикой на стороне сервера.

Поделиться
0

Используйте следующее:

html-код

<body>
    <div>
       <ul style="display:inline; background-color:lightgray; float:left">
         <li style="margin:20px; display:inline-block" onclick="frames['target'].location.href='one.html'; toggle_bgcolor(this);">One</li>
         <li style="margin:20px; display:inline-block" onclick="frames['target'].location.href='two.html'; toggle_bgcolor(this);">Two</li>
         <li style="margin:20px; display:inline-block" onclick="frames['target'].location.href='three.html'; toggle_bgcolor(this);">Three</li>
       </ul>
       <iframe id="target"></iframe>
    </div>
</body>

Функция JS

function toggle_bgcolor(elem)
{
    for(var c=0; c<elem.parentNode.getElementsByTagName('li').length; c++)
    {
        elem.parentNode.getElementsByTagName('li')[c].style.backgroundColor='';
    }
    elem.style.backgroundColor='limegreen';
}

ИС-блок для onclick событие в каждой <li> элемент будет переключать baclkground-color каждого <li> элемента, когда другой <li> нажата.

Проверьте эту скрипку

Поделиться
0

Ваш вопрос немного неясен. Но если я правильно понял в вашем случае, я должен использовать конкретный класс css, который загружается, если вы определяете, что находитесь на текущей странице.

Что-то вроде этого (я не знаю asp, я приведу общий пример)

<div>
   <ul>
     <li <?php if($CurrentPage = 'One') {echo 'class="active"';} ?>>One</li>
     <li <?php if($CurrentPage = 'Two') {echo 'class="active"';} ?> >Two</li>
     <li <?php if($CurrentPage = 'Three') {echo 'class="active"';} ?>>Three</li>
   </ul>
</div>

это добавит специальный класс вашему элементу. Этот класс будет иметь цвет наведения, и проблема решена. Надеюсь, вы сможете адаптировать это к asp.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню