Форум

Царь Леонид · #1 (**permalink**) 07.11.2013, 12:39

День добрый, учу jquery, в целях самообучения сделал небольшой скрипт, в принципе все работает как надо, но мне кажется получилось как-то убого в плане того, что можно было написать покороче и пояснее, профи, жду вашей критики

<!DOCTYPE HTML>
<html>
  <head>   
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  </head>
  <body>
<script>
      $(document).ready(function(){
        $("#first_tag").click(function()
        { 
          if($(".second_div, .third_div, .four_div").lenght != 0){
            $(".second_div, .third_div, .four_div").hide();
         }
          $(".first_div").fadeIn(600);      
        });
        $("#second_tag").click(function()
         {
		 if($(".first_div, .third_div, .four_div").lenght != 0){
            $(".first_div, .third_div, .four_div").hide();
          }
          $(".second_div").fadeIn(600);
        });
        
        $("#third_tag").click(function()
        {
		if($(".first_div, .second_div, .four_div").lenght != 0){
            $(".first_div, .second_div, .four_div").hide();
        }
          $(".third_div").fadeIn(600);
        });
        $("#four_tag").click(function()
        {
		if($(".first_div, .second_div, .third_div").lenght != 0){
            $(".first_div, .second_div, .third_div").hide();
        }
          $(".four_div").fadeIn(600);
        });
      });
      
    </script>
   <ul> 
     <li><a href="#" id="first_tag">Первый</a></li>
    <li><a href="#" id="second_tag">Второй</a></li>
    <li><a href="#" id="third_tag">Третий</a></li>
    <li><a href="#" id="four_tag">Четвертый</a></li>
  </ul> 
   <div class="first_div"> 
     <h3>Первый див</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum justo ut felis pulvinar, ac fermentum justo posuere. Ut pretium rutrum ligula, egestas pellentesque quam faucibus sit amet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam erat volutpat. Nullam ullamcorper, tortor in mollis varius, arcu ipsum elementum odio, sed rhoncus elit erat id mi. Praesent vestibulum nec justo quis pretium. Etiam at eros lobortis, scelerisque mi at, dapibus risus. Nam id tincidunt justo. Aliquam consequat lectus id nisl scelerisque auctor. Morbi in magna pharetra, ultricies ipsum non, commodo tellus.</p>
    </div>
    <div class="second_div"> 
     <h3>Второй див</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum justo ut felis pulvinar, ac fermentum justo posuere. Ut pretium rutrum ligula, egestas pellentesque quam faucibus sit amet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam erat volutpat. Nullam ullamcorper, tortor in mollis varius, arcu ipsum elementum odio, sed rhoncus elit erat id mi. Praesent vestibulum nec justo quis pretium. Etiam at eros lobortis, scelerisque mi at, dapibus risus. Nam id tincidunt justo. Aliquam consequat lectus id nisl scelerisque auctor. Morbi in magna pharetra, ultricies ipsum non, commodo tellus.</p>
    </div>
     <div class="third_div"> 
     <h3>Третий див</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum justo ut felis pulvinar, ac fermentum justo posuere. Ut pretium rutrum ligula, egestas pellentesque quam faucibus sit amet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam erat volutpat. Nullam ullamcorper, tortor in mollis varius, arcu ipsum elementum odio, sed rhoncus elit erat id mi. Praesent vestibulum nec justo quis pretium. Etiam at eros lobortis, scelerisque mi at, dapibus risus. Nam id tincidunt justo. Aliquam consequat lectus id nisl scelerisque auctor. Morbi in magna pharetra, ultricies ipsum non, commodo tellus.</p>
    </div>
    <div class="four_div"> 
    <h3>Четвертый див</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum justo ut felis pulvinar, ac fermentum justo posuere. Ut pretium rutrum ligula, egestas pellentesque quam faucibus sit amet. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam erat volutpat. Nullam ullamcorper, tortor in mollis varius, arcu ipsum elementum odio, sed rhoncus elit erat id mi. Praesent vestibulum nec justo quis pretium. Etiam at eros lobortis, scelerisque mi at, dapibus risus. Nam id tincidunt justo. Aliquam consequat lectus id nisl scelerisque auctor. Morbi in magna pharetra, ultricies ipsum non, commodo tellus.</p>
    </div>    
<style>
  ul li{display:inline;padding-left:20px;}
  div.first_div{background-color:#ccc;height:200px;margin-top:20px;}
  div.second_div, .third_div, .four_div{background-color:#ccc;display:none;height:200px;margin-top:20px;}
    </style>
     </body>
</html>

рони · #2 (**permalink**) 07.11.2013, 13:21

Царь Леонид,

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <style>
    ul li {
        display:inline;
        padding-left:20px;
    }
    div.first_div {
        background-color:#ccc;
        height:200px;
        margin-top:20px;
    }
    div.second_div, .third_div, .four_div {
        background-color:#ccc;
        display:none;
        height:200px;
        margin-top:20px;
    }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <script>
    $(document)
        .ready(function () {
            var li = $('[id $= tag]'),
                div = $('[class $= div]');
            li.click(function (event) {
                event.preventDefault();
                div.hide()
                    .eq(li.index(this))
                    .fadeIn(600);
            })
        });
    </script>
</head>

<body>
    <ul>
        <li><a href="#" id="first_tag">Первый</a>
        </li>
        <li><a href="#" id="second_tag">Второй</a>
        </li>
        <li><a href="#" id="third_tag">Третий</a>
        </li>
        <li><a href="#" id="four_tag">Четвертый</a>
        </li>
    </ul>
    <div class="first_div">
        <h3>Первый див</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum justo ut felis pulvinar, ac fermentum justo posuere. Ut pretium rutrum ligula, egestas pellentesque quam faucibus sit amet. Interdum et malesuada fames ac ante ipsum primis
            in faucibus. Aliquam erat volutpat. Nullam ullamcorper, tortor in mollis varius, arcu ipsum elementum odio, sed rhoncus elit erat id mi. Praesent vestibulum nec justo quis pretium. Etiam at eros lobortis, scelerisque mi at, dapibus risus.
            Nam id tincidunt justo. Aliquam consequat lectus id nisl scelerisque auctor. Morbi in magna pharetra, ultricies ipsum non, commodo tellus.</p>
    </div>
    <div class="second_div">
        <h3>Второй див</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum justo ut felis pulvinar, ac fermentum justo posuere. Ut pretium rutrum ligula, egestas pellentesque quam faucibus sit amet. Interdum et malesuada fames ac ante ipsum primis
            in faucibus. Aliquam erat volutpat. Nullam ullamcorper, tortor in mollis varius, arcu ipsum elementum odio, sed rhoncus elit erat id mi. Praesent vestibulum nec justo quis pretium. Etiam at eros lobortis, scelerisque mi at, dapibus risus.
            Nam id tincidunt justo. Aliquam consequat lectus id nisl scelerisque auctor. Morbi in magna pharetra, ultricies ipsum non, commodo tellus.</p>
    </div>
    <div class="third_div">
        <h3>Третий див</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum justo ut felis pulvinar, ac fermentum justo posuere. Ut pretium rutrum ligula, egestas pellentesque quam faucibus sit amet. Interdum et malesuada fames ac ante ipsum primis
            in faucibus. Aliquam erat volutpat. Nullam ullamcorper, tortor in mollis varius, arcu ipsum elementum odio, sed rhoncus elit erat id mi. Praesent vestibulum nec justo quis pretium. Etiam at eros lobortis, scelerisque mi at, dapibus risus.
            Nam id tincidunt justo. Aliquam consequat lectus id nisl scelerisque auctor. Morbi in magna pharetra, ultricies ipsum non, commodo tellus.</p>
    </div>
    <div class="four_div">
        <h3>Четвертый див</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum justo ut felis pulvinar, ac fermentum justo posuere. Ut pretium rutrum ligula, egestas pellentesque quam faucibus sit amet. Interdum et malesuada fames ac ante ipsum primis
            in faucibus. Aliquam erat volutpat. Nullam ullamcorper, tortor in mollis varius, arcu ipsum elementum odio, sed rhoncus elit erat id mi. Praesent vestibulum nec justo quis pretium. Etiam at eros lobortis, scelerisque mi at, dapibus risus.
            Nam id tincidunt justo. Aliquam consequat lectus id nisl scelerisque auctor. Morbi in magna pharetra, ultricies ipsum non, commodo tellus.</p>
    </div>
</body>

</html>

jsru_ · #3 (**permalink**) 07.11.2013, 13:23

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

вызов что-то типа этого лучше сделать типа этого

$('#myTab a').click(function (e) {
  e.preventDefault()

  функция показа таба

})

ссылку на див который относится к данному табу лучше держать в атрибуте

Царь Леонид · #4 (**permalink**) 07.11.2013, 13:25

спасибо!

Форум

Справочник

Discord чат

Курсы javascript