使用php或jquery更改div

Question

我想用php或jquery更改div，重要的是改变div宽度。

场景：

我有div我想要的如果我点击<a> tag 点击我以扩大div div必须增加宽度，当点击我点击默认宽度 div回到默认宽度。

<div class="mydiv"> my content here </div>

<a class="inlarge" href="#">click me to inlarge the div</a>
<a class="default" href="#">click me to default width</a>

Answer 1

使用.css()更改div的width 。

尝试这个：

$('.inlarge').click(function () {
    $(".mydiv").css("width", "100%");
});
$('.default').click(function () {
    $(".mydiv").css("width", "50%");
});

JSFiddle演示

Answer 2

你可以使用animate functyion或只是css函数来做到这一点： -

$(function(){
$('.inlarge').click(function(){
    $('.mydiv').animate({'width':'100%'},1000);
});

 $('.default').click(function(){
     $('.mydiv').animate({'width':'80%'},1000);
  });
});

通过css： -

$(function(){
  $('.inlarge').click(function(){
    $('.mydiv').css({'width':'100%'});
});

 $('.default').click(function(){
  $('.mydiv').css({'width':'80%'});
   });
});

演示

Answer 3

你可以使用jquery使用.css -

var width = $( ".mydiv" ).width(); // calculate default width
//alert(width);return false;
$('.inlarge').click(function(){
    $('.mydiv').css('width','100px'); // change 100px
});
$('.default').click(function(){
    $('.mydiv').css('width',width+'px');
});