Как проще сделать такое как на картинке ?

Saturn · November 17, 2011

Доброго дня.

Знаю что есть много вариантов такой реализации, но скажите, какой лучше всего использовать

на чистом CSS или с Javascript?

Вот картинка

Softlink · November 17, 2011

Вас интересует функционал переключения вкладок? Для этого лучше js использовать, т.к. на css получается очень непрактичная штука.

rus · November 17, 2011

это называется табы - гуглите в эту сторону.

Saturn · November 17, 2011

Если я на невидимые вкладки установлю display: none;

а по клику на нужную кнопку с помощью JS

click(function{
$('#').addClass()
});

Это нормально будет?!

Edited November 17, 2011 by Saturn

LegGnom · November 17, 2011

Вот наглядный код:


<script>

function loadPage(t, cName){
$('.list li').removeClass('cur');
$(t).addClass('cur');
$('.block').hide();
$('.'+cName).show();
}

</script>

<style>
.b1{dysplay:block;}
.block{display:none;}
</style>

<ul class="list">
<li onclick="loadPage(this, 'b1')">1</li>
<li onclick="loadPage(this, 'b2')">2</li>
</ul>

<div>
  <div class="b1 block">BLOCK1</div>
  <div class="b2 block">BLOCK2</div>
</div>

Только учти я здесь jquery использовал

Edited November 17, 2011 by LegGnom

Saturn · November 18, 2011

LegGnom

Спасибо, что подтолкнули на путь правильный.

Вот как я немного переделал.


<script>
 $(document).ready(function() {

$('.list li').click(function() {
    var id_li = $(this).attr("id");
    $('.block').hide();
    $('.'+id_li).show();

});


 });

</script>    
</head>
<body>
<style>
.b1{dysplay:block;}
.block{display:none;}
</style>

<ul class="list">
<li id="b1">1</li>
<li id="b2">2</li>
</ul>

<div>
  <div class="b1 block">BLOCK1</div>
  <div class="b2 block">BLOCK2</div>
</div>



    </body>
</html>

Edited November 18, 2011 by Saturn

Sign In

Как проще сделать такое как на картинке ?

Question

Saturn

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Softlink

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

Saturn

Link to comment

Share on other sites

LegGnom

Link to comment

Share on other sites

Saturn

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information