Как получить классический парящий, активный и т. Д.поведение с JavaScript - PullRequest
Новая
       19

Как получить классический парящий, активный и т. Д.поведение с JavaScript

0 голосов
/ 08 февраля 2012

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

Вот случай:

Если есть страница с 6 ссылками и 6 вкладками. Каждая ссылка показывает или скрывает вкладку с помощью JavaScript (отображение: блок / нет). Я сталкиваюсь с проблемой, что нормальный способ HTML / CSS не работает. Я могу установить свой CSS, чтобы сделать ссылку, но такие вещи, как активные и т. Д. Не работают. Теперь я использую 6 отдельных функций для управления стилем каждой ссылки, чтобы при нажатии на ссылку 5 ссылка 5 была подчеркнута, а остальные - нет.

Я уже пытался реорганизовать свой код, используя .this и obj., но это по-прежнему не дает желаемого поведения. Кажется, что CSS больше не работает, как только вы измените CSS с помощью JS.

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

У кого-нибудь есть идеи? Как вы решаете эту проблему? Это становится реальной проблемой для моих новых проектов, где весь контент генерируется автоматически.

Ответы [ 3 ]

2 голосов
/ 08 февраля 2012

Кажется, что css больше не работает, если вы измените css с помощью js.

Это говорит о том, что (непосредственно через некоторую абстракцию) вы используете JS для изменения.style.* свойства элемента.

Они соответствуют атрибуту style, который всегда считается «наиболее специфичным ».

Решение состоит в том, чтобы оставить атрибут стиля в покое.Если вы хотите изменить стиль элемента, тогда предварительно укажите свой CSS в таблице стилей .Затем используйте JavaScript для изменения className элемента.

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

(Это просто следует из обычных правил разделения интересовРазработчики, как правило, становятся лучше в том, чтобы отделить CSS от HTML, а JS - от HTML, но чаще всего теряют способность не отделять CSS от JS)

0 голосов
/ 08 февраля 2012

Я думаю, что вы можете достичь желаемой функциональности с помощью jQuery.

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

<a href ="#" class ="test not" >a</a>
<a href ="#" class ="test not" >b</a>
<a href ="#" class ="test not" >c</a>

, затем с помощью jQuery live вы можете написать код для любого события, например, я покажу, как удалять и добавлять классы в событии наведения 

<script type ="text/javascript">
    $(document).ready(function () {
        $('.test').live('hover', function () {

            $(this).removeClass('not');
            $(this).addClass('selected');                     

        });
    });
</script>

Как и в приведенном выше коде вы можете идентифицировать ссылки с выбранными отдельноВы также можете использовать любое другое событие как «зависание»

надеюсь, это поможет

0 голосов
/ 08 февраля 2012

Если вы используете jQuery, вы можете использовать функцию наведения, чтобы легко создать эффект состояния наведения. 

if ($("#tab").hasClass('active') {
    $(".class-of-item-to-show").show();
}

$("#tab1").hover(
  function () {
    $(".class-of-item-to-show").show();
  }, 
  function () {
    $(".class-of-item-to-show").hide();
  }
);

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

...