jQuery - изменяйте CSS ссылок, когда они перемещаются в крайнее левое меню навигации по клику

Question

jQuery - изменяйте CSS ссылок, когда они перемещаются в крайнее левое меню навигации по клику

0

Это мой первый вопрос, но я застрял, и я надеюсь, что я четко объясню, что я пытаюсь.

У меня есть навигационное меню, которое при нажатии на ссылку (этот выбор) перемещается в крайнее левое пятно меню. Независимо от того, какой пункт меню нажат, и в крайнем левом месте, я просто хочу, чтобы шрифт был больше и цвет оранжевый. Следующий параметр, который нужно щелкнуть, должен идти в левом пятне, а его шрифт больше и цвет оранжевый, а остальные варианты возвращаются к маленькому и белому.

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

Вот мой код:

HTML:

    <div>
       <ul id="main-top">
          <li id="blank"><a href="#" ></a></li>
          <li><a href="#" id="proj1" class="mainNav">Projects</a></li>
          <li><a href="#" id="serv1" class="mainNav">Services</a></li>
          <li><a href="#" id="cont1" class="mainNav">Contact</a></li>
          <li><a href="#" id="client1">Sign-in</a></li>
       </ul>
    </div>

CSS:

body {
background: black;
color: white;
}

#main-top {
position: absolute;
top: 75px;
border-top: 1px solid #ffffff;
width: 850px;
}

#main-top li{
display: inline;
list-style-type:none;
padding-right: 20px;
padding-bottom: 16px;
border-right: 1px solid #ffffff;
height: 50px;
}

a {
color: white;
font-size: 1em;
padding: 10px 75px 5px 3px;
text-decoration: none;
list-style-type: none;
}

a:hover{
color: #FF4500;
}

JQuery:

$('li').click(function() {
   var $this = $(this);
   $this.insertBefore($this.siblings(':eq(0)'));
   $('#blank').hide();
});

demo: http://jsfiddle.net/CLTZs/

Я попробовал просто добавить функцию, чтобы изменить css первого ребенка, но он нацелен на это пустое место, а не то, что в него входит.

Stan 15 апр. 2014, в 22:50

Источник

Теги:

javascript

jquery

html

css

nav

2 ответа

0

Вы можете addClass в свою функцию

DEMO http://jsfiddle.net/CLTZs/1/

JQuery

$('li').click(function() {
    var $this = $(this);
    $this.insertBefore($this.siblings(':eq(0)'));
    $this.addClass('firstOpt');
    $('#blank').hide();
});

CSS

#main-top li.firstOpt a {
    color: #FF4500;
    font-size: 25px;
    font-weight: bold;
}

Kevin Lynch 15 апр. 2014, в 18:43

0

Спасибо за это, поначалу кажется, что это работает, но если вы щелкнете по другому пункту меню, первый выбранный вариант останется с этим новым шрифтом / размером. Это была моя проблема, когда я просто пытался добавить $ this.css ..., это работает, но мне нужно, чтобы он вернулся к тому, как это было, если щелкнуть другой параметр.
Stan 16 апр. 2014, в 12:07
0

Я уверен, что есть способ добавить в .removeClass, мне придется поэкспериментировать с ним и сообщить, спасибо за помощь!
Stan 16 апр. 2014, в 12:08

Ещё вопросы

Спасибо за это, поначалу кажется, что это работает, но если вы щелкнете по другому пункту меню, первый выбранный вариант останется с этим новым шрифтом / размером. Это была моя проблема, когда я просто пытался добавить $ this.css ..., это работает, но мне нужно, чтобы он вернулся к тому, как это было, если щелкнуть другой параметр.
Я уверен, что есть способ добавить в .removeClass, мне придется поэкспериментировать с ним и сообщить, спасибо за помощь!

Stan · Accepted Answer · 2014-04-21T10-28-00.000Z

Только так я не оставляю этот вопрос там, где не ответил полностью - я смог получить желаемый эффект, используя ваше предложение @Vector и добавив немного, чтобы вернуть li к оригинальному виду:

$('li').click(function() {
  var $this = $(this);
  $this.insertBefore($this.siblings(':eq(0)'));
  $this.toggleClass('active');
  $this.siblings().removeClass("active");
  $('#blank').hide();
});

и добавление класса "active" в мой CSS:

.active a{
color: #FF4500;
font-size: 25px;
font-weight: bold;
margin: 0;
}

Поскольку у меня есть другие jquery-переключатели, связанные с этими опциями меню, я смог вставить этот jquery прямо в мою существующую функцию, и она отлично работает. По какой-то причине он отбрасывает мой пробел в остальной части списка, но мне придется это выяснить в моих файлах css.

скрипка: http://jsfiddle.net/CLTZs/2/