JQuery и пользовательские вкладки с использованием addClass и removeClass - PullRequest
Новая
       7

JQuery и пользовательские вкладки с использованием addClass и removeClass

1 голос
/ 11 февраля 2009

Так что я довольно новичок в JQuery и только что потратил 5 часов, чтобы все заработало. Если у кого-то есть лучший подход, пожалуйста, я хотел бы услышать.

Это мой основной вопрос, как это можно сделать чище, более рационально?

Я использовал плагин minitabs, и код, приведенный ниже, будет переключать пользовательские вкладки вперед и назад. Мне нужен был способ, чтобы одна вкладка была синей, а другая серой, в зависимости от того, на какой вкладке я был. То, против чего я ударил, было tab1 , которое оставалось бы синим, даже когда я нажимал на tab2 , просто было прикольно, пока это не исправилось. Как видите, это не самый чистый подход, но он работает. Я уверен, что если вы хотите попробовать это, плагин minitab можно найти здесь. 

http://minitabs.googlecode.com/files/jquery.minitabs.js

JQuery: 

$(document).ready(function(){

   $("#tabs").minitabs('slow', 'fade');

        $("#tab1").click(function()
            {
                var $this = $(this);
                if( $this.is('.removed') ) 
                     {
                       $this.removeClass('removed');
                       $this.addClass('selected');
                       $('#tab2').removeClass('selected');
                       $("#tab2").addClass('removed');
                } else {
                       $('#tab2').removeClass('selected');
             }
    return false;
        });
        $("#tab2").click(function()
            {
                var $this = $(this);
                if( $this.is('.removed') ) 
                  {
                        $this.removeClass('removed');
                        $this.addClass('selected');
                       $("#tab1").removeClass('selected');
                       $("#tab1").addClass('removed');
                } else {
                       $('#tab1').removeClass('selected');

              }
                return false;
        });
   });

Тело: 

<div id="tabs"> 
          <ul>
            <li><a href="#quick-links" class="tab-l selected" id="tab1">tab-l</a></li>
            <li><a href="#newsletter-link" class="tab-r removed" id="tab2">tab-r</a></li>
        </ul>

        <div id="quick-links">
<ul>
  <li>Look at me getting myself all in a frenzy!</li>               
</ul>
        </div>

        <div id="newsletter-link">
  Sometimes it's would be nice if they reported the fun news!
        </div>   

</div>

1 Ответ

2 голосов
/ 11 февраля 2009

Я кратко рассмотрел это и не увидел никаких проблем с этой менее сложной настройкой, которая использует преимущества мини-вкладок, автоматически применяющих класс «current» к текущей выбранной вкладке: 

<head>
    <style type="text/css">
    .tabs a {
        background: grey;
    }
    .tabs a.current {
        background: blue;
    }
    </style>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#tabs").minitabs('slow', 'fade');
    });
    </script>
</head>
<body>
    <div id="tabs">
        <ul class="tabs">
            <li><a href="#quick-links" class="tab-l current" id="tab1">tab-l</a></li>
            <li><a href="#newsletter-link" class="tab-r" id="tab2">tab-r</a></li>
        </ul>

        <div id="quick-links">
            <ul>
                <li>Look at me getting myself all in a frenzy!</li>
            </ul>
        </div>

        <div id="newsletter-link">
            Sometimes it's would be nice if they reported the fun news!
        </div>
    </div>
</body>

Для меня это прекрасно подходит к описанному вами случаю.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...