1

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

1
  • Вы не используете никаких серверных языков, типа: PHP, ASP.NET, Ruby или тому подобные? Только HTML и JS?
    – HA3IK
    19 дек 2013 в 20:13

2 ответа 2

1

Если вопрос составлен корректно, и задачу действительно нужно решить исключительно на клиенте, то можно сделать например так: http://jsfiddle.net/b8bqz/

var loc = window.location.href.split('?')[0]
$('.nav a').each(function () {
    if ($(this).attr('href').indexOf(loc) == 0) $(this).parent().addClass('active')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default" role="navigation">
    <ul class="nav navbar-nav">
        <li><a href="#">Link 1</a></li>
        <li><a href="http://jsfiddle.net/">Link 2</a></li>
        <li><a href="http://fiddle.jshell.net/_display/">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
    </ul>
</nav>

Но вообще-то лучше на сервере определять, какой пункт меню активен.

4
  • Елена, а откуда тут бутстрап ?
    – zb'
    19 дек 2013 в 20:40
  • подключен из cdn. Для сути задачи не имеет значения, но с ним проще сделать вид, что это меню. 19 дек 2013 в 20:46
  • 1
    мне кажется лучше prop использовать jsfiddle.net/oceog/b8bqz/2
    – zb'
    19 дек 2013 в 20:51
  • вообще да, prop лучше. Но сравнивать не целиком строку на точное соответствие, а чтобы адрес текущей страницы начинался с адреса, указанного в пункте меню. Менюшки бывают и многоуровневыми. 19 дек 2013 в 20:56
0

CSS:

.active{ background: red!important;}

HTML: (Немного до-изменил Ваш: добавил ссылки и выправил ошибки)

<div class="menu"> 
        <ul> 
            <li><a href='?page=main'>One</a></li> 
            <li><a href='?page=product'>Two</a></li> 
            <li><a href='?page=three'>Three</a></li>
        </ul>
        <ul class="submenu"> 
            <li><a href="?page=four">Four</a></li> 
            <li><a href="?page=five">Five</a></li> 
            <li><a href="?page=six">Six</a></li> 
        </ul> 
        <ul> 
            <li><a href='?page=contacts'>Seven</a></li> 
            <li><a href='?page=order_page'>Eight</a></li> 
        </ul> 
    </div>

JS: (С помощью jQuery, все это дело организовать намного проще. Советую поинтересоваться)

var mainMenu = document.getElementsByTagName("div"); //ищем теги div

for(var i=0;i<mainMenu.length;i++){
    if(mainMenu[i].getAttribute("class")=="menu"){
        mainMenu = mainMenu[i]; //ищем и запаковываем div с классом menu
        break;
    }
}

var aTag = mainMenu.getElementsByTagName("a"); //ищем все теги А

var thisPage;

for(var i=0;i<aTag.length;i++){

    thisPage = aTag[i].href.split("?"); //делим путь по разделителю "?"

    if(RegExp("^http:\/\/.*\?"+thisPage[1]+'.*').test(window.location.href)){
        aTag = aTag[i]; //сохраняем наш тег
        break;
    }
}

var liTag = aTag.parentNode; //выбираем наш родительский тег (li)
liTag.setAttribute("class","active"); //добавляем класс

Вот Вам готовый, рабочий html: https://www.dropbox.com/s/jqdv3r5fllw1orz/testmenu.html - анализируйте)

8
  • меню бывают вложенными :) 19 дек 2013 в 20:23
  • та они всякие бывают, нету примера от человека )
    – HA3IK
    19 дек 2013 в 20:26
  • это-то да, пример бы был значительной помощью. А вот ещё я смотрю на ваш пример и никак не пойму: а откуда id берётся? 19 дек 2013 в 20:34
  • ссылка /?page=main и меню <div class="menu"> <ul> <li class="active"><a href='?page=main'></a></li> <li><a href='?page=product'></a></li> <li><a href='#'></a> <ul class="submenu"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </li> <li><a href='?page=contacts'></a></li> <li><a href='?page=order_page'></a></li> </ul> </div
    – privetsh
    19 дек 2013 в 21:06
  • Пробуйте, теперь должно сработать. По крайней мере у меня всё работает. Учтите! Ссылки с пустым местом или решёткой - не изменяют своей локации, так что и меню не переключит.
    – HA3IK
    19 дек 2013 в 23:09

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.