Javascript-форум - Активное li a внутри li a

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Активное li a внутри li a (https://javascript.ru/forum/jquery/50211-aktivnoe-li-vnutri-li.html)

SLameN

16.09.2014 21:16

Активное li a внутри li a

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function () { 
    $('#menu a').each(function () {
        var location = window.location.href;
        var link = this.href; 
        if(location == link) {
            $(this).addClass('active');
        }
    });
});
</script>

<ul id="menu">
            <li><a href="#">Тест</a></li>
<li><a href="#">Тест 2</a>
<ul>
<li><a href="#">Тест 3</a></li>
<li><a href="#">Тест 4</a></li>
</ul></li>
</ul>

Как сделать, чтобы подсвечивался главный <li> внутри которого еще один ul. На данный момент подсвечивает только внутри второго ul

Pavel M.

16.09.2014 23:04

можно так

<!DOCTYPE HTML>
<html>
  
  <head>
    <style>
      .active {
        color: red;
      }
    </style>
  </head>
  
  <body>
    <ul id="menu">
      <li><a href="#">Тест</a></li>
      <li><a href="#">Тест 2</a>
        <ul>
          <li><a href="#">Тест 3</a></li>
          <li><a href="xxx">Тест 4</a></li>
        </ul>
      </li>
    </ul>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
      $(function () {
        $('#menu a').each(function () {
          var location = 'xxx'; //window.location.href;
          var link = this.href;
          if (link.indexOf(location) !== -1) {
            $(this).addClass('active');
          }
        });
        $('#menu li').has('a.active').find('> a').addClass('active');

      });
    </script>
  </body>

</html>

Vlasenko Fedor

16.09.2014 23:32

это наводящие примеры

<style>
  a[href=test2] {
    color: red
  }
}
.active {
  color: green;
  font-weight: bold;
}
</style>
<body>
  <ul id="menu">
    <li>
      <a href="test1">Тест1</a>
    </li>
    <li>
      <a href="test2">Тест2</a>
    </li>
    <li>
      <a href="test3">Тест3</a>
    </li>
  </ul>
  <script>
    var link = document.querySelector("#menu a[href='test1']");
    //document.querySelector("#menu a[href='" + window.location.href + "']")
    if (link) link.style.color = 'green';
  </script>
</body>

SLameN

18.09.2014 10:51

Pavel M., к сожалению не работает
Poznakomlus, а что такое [href=test2] в css? Я не сильно силен в JS натолкните хоть на правильный путь...

Заранее спасибо

ksa	18.09.2014 13:50

Цитата:

Сообщение от SLameN

Как вариант, использовать метод

parents('li')

и брать последнего родителя. Потом искать там дочернюю ссылку и уже ее отмечать...

ksa	18.09.2014 14:00

Цитата:

Сообщение от SLameN

Я не сильно силен в JS натолкните хоть на правильный путь

Что-то типа такого...

<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
.active {
	background-color: red;
}
</style>
<script type='text/javascript'>
$(function () { 
    $('#menu a').each(function () {
		var location = 'test' //window.location.href;
		var link = this.href; 
		//if(location == link) {
		if(link.lastIndexOf(location)>-1) {
			var o=$(this).parents('li');
			o.eq(o.length-1).children('a').addClass('active');
		};
    });
});
</script>
</head>
<body>
<ul id="menu">
	<li>
		<a href="#">Тест</a>
	</li>
	<li>
		<a href="#">Тест 2</a>
		<ul>
		<li><a href="test">Тест 3</a></li>
		<li><a href="#">Тест 4</a></li>
		</ul>
	</li>
</ul>
</body>
</html>
</html>

Проверку я конечно сделал для теста... Потом сделай свою, какую нужно...

SLameN

18.09.2014 14:37

А если названия файлов разные, как быть?

ksa	18.09.2014 14:43

Цитата:

Сообщение от SLameN

А если названия файлов разные, как быть?

Я не понял...

Делай условия какие тебе нужно. Это я для демонстрации такие сделал.

SLameN

18.09.2014 14:55

<li><a href="#">Материалы</a>
                <ul>
                    <li><a href="a.php">Статьи</a></li>
                    <li><a href="b.php">Новости</a></li>
                    <li><a href="v.php">Полезные ссылки</a></li>
                    <li><a href="c.php">Вопросы инструктору</a></li>
                </ul>
            </li>

var location = 'test' - ведь у меня же разные страницы? я же через запятую их не напишу.

А если сделать так:
var location = window.location.href;

То работает как-то некорректно, выделяет половину <li>

ksa	18.09.2014 14:57

Цитата:

Сообщение от SLameN

var location = 'test' - ведь у меня же разные страницы?

Это сделано для примера... :D

Цитата:

Сообщение от SLameN

А если сделать так:
var location = window.location.href;

То работает как-то некорректно, выделяет половину <li>

Таки смотри, что тебе выдает... Смотри с чем сравнивает... Делай выводы.

Часовой пояс GMT +3, время: 16:03.