[Hỏi đáp] height của class thay đổi khi chọn tab

Mình có 2 tab chọn 1 và 2

và mình có đoạn code:

Code:

<div class="dongkhung">
thử chức năng
</div>


mình muốn khi chọn tab 1 thì height của class dongkhung sẽ là 100px và khi chọn tab 2 thì height của class dongkhung sẽ là 200px

ai giúp mình với. thanks all  :D

Dùng hàm click() và animate(). Cần chỉnh sửa vài chỗ

Code:


$(function () {
  $(tab1).click(function() {
    $('.dongkhung').animate({height:100},200);
  });
  $(tab2).click(function() {
    $('.dongkhung').animate({height:200},200);
  });
});


anh xem giúp em xem em sai ở đâu với ạk

Code:

<div class="tag">
<div class="tab1">tab1</div>
<div class="tab2">tab2</div>
</div>
<div class="dongkhung">
thử chức năng
</div>
<script type="text/javascript">
$(function () {
  $(.tab1).click(function() {
    $('.dongkhung').animate({height:100},200);
  });
  $(.tab2).click(function() {
    $('.dongkhung').animate({height:200},200);
  });
});
</script>
<style>
.dongkhung {border:1px solid #ddd;}
.tag div{padding: 0px 10px;color:#333;cursor:pointer;display:inline-block;text-decoration:none;}
.tag div.active{border:1px solid #ddd;background-color:#fff;padding: 5px 10px;color: #ff4400;}
</style>

thanks anh ạk

thiếu '

Zero wrote:thiếu '

thiếu gì anh giúp em thêm đc ko ak? em ko bik gì về js ạ :(

Sửa lại Script

Code:

$(function () {
  $('.tab1').click(function() {
    $('.dongkhung').animate({height:100},200);
  });
  $('.tab2').click(function() {
    $('.dongkhung').animate({height:200},200);
  });
});

Bác sửa giúp em với đc ko ạ em ko bik tí gì về js :(

Code:

<div class="tag">
<div class="tab1">tab1</div>
<div class="tab2">tab2</div>
</div>
<div class="dongkhung">
thử chức năng
</div>
<script type="text/javascript">
$(function () {
  $('.tab1').click(function() {
    $('.dongkhung').animate({height:100},200);
  });
  $('.tab2').click(function() {
    $('.dongkhung').animate({height:200},200);
  });
});
</script>
<style>
.dongkhung {border:1px solid #ddd;}
.tag div{padding: 0px 10px;color:#333;cursor:pointer;display:inline-block;text-decoration:none;}
.tag div.active{border:1px solid #ddd;background-color:#fff;padding: 5px 10px;color: #ff4400;}
</style>

mình làm đc rồi thanks tất cả mọi người :3

vậy nếu em có đoạn em muốn khi select tab 1 thì height là 100px còn khi select tab 2 thì height là 200px thì phải làm thế nào ạ?

demo: http://vngame.cool.st/h33-page

Code:

<select class="changeLast">
         <option class="tab1">tab 1</option>
         <option class="tab2">tab 2</option>
      </select>
  
<div class="dongkhung">
thử chức năng
</div>
<style>
.dongkhung {border:1px solid #ddd;}
</style>


Hungkoy.mct wrote:mình làm đc rồi thanks tất cả mọi người :3

vậy nếu em có đoạn em muốn khi select tab 1 thì height là 100px còn khi select tab 2 thì height là 200px thì phải làm thế nào ạ?

demo: http://vngame.cool.st/h33-page

Code:

<select class="changeLast">
         <option class="tab1">tab 1</option>
         <option class="tab2">tab 2</option>
      </select>
  
<div class="dongkhung">
thử chức năng
</div>
<style>
.dongkhung {border:1px solid #ddd;}
</style>


như trên...

Em test nhưng select không hoạt động ạ
demo: http://www.vngame.pro/h33-page
code em chèn ở html

Code:

<select class="changeLast">
        <option class="tab1">tab 1</option>
        <option class="tab2">tab 2</option>
      </select>
 
<div class="dongkhung">
thử chức năng
</div>
<script type="text/javascript">
$(function () {
  $('.tab1').click(function() {
    $('.dongkhung').animate({height:100},200);
  });
  $('.tab2').click(function() {
    $('.dongkhung').animate({height:200},200);
  });
});
</script> 
<style>
.dongkhung {border:1px solid #ddd;}
</style>

sao trên đây và đây hoạt động?

em cũng ko rõ nhưng em ko thấy hoạt động chắc là do máy tính em. thanks anh ạk

select thì dùng change nhé :v
http://jsfiddle.net/baivong/xmpx6cde/
http://jsfiddle.net/baivong/xmpx6cde/1/
http://jsfiddle.net/baivong/xmpx6cde/2/

Quá tuyệt thanks huynh.
P/s: trích dẫn bị lỗi hay sao ấy huyh