2012-02-01 121 views
0

我有div和按钮。 .buttons大小不变。更改jQuery中按钮的高度,使用.css不起作用

(的script.js是在同一目录中的HTML索引文件。)

$(document).ready(function(){ 
 
    $('#next').click(function(){ 
 
     $('.button').css('height','1200'); 
 
    }); 
 
});
<html> 
 
<head> 
 
<link href="style.css" rel="stylesheet" type="text/css" /> 
 
<script type="text/javascript" src="script.js" ></script> 
 
<title></title> 
 
</head> 
 
<body> 
 

 
    <div id="slide_container"> 
 
     <div id="slide"> 
 

 
     </div> 
 
     <a id='next' href="#">Next One</a> 
 
     <input type="button" id="btnPrev" value="Prevous" class="button"/> 
 
     <input type="button" id="btnNext" value="Next" class="button"/> 
 
    </div> 
 

 
</body> 
 
</html>

+2

你在JavaScript控制台中有什么错误? – 2012-02-01 13:22:36

+0

假如你已经在页面上包含了jQuery,你有什么工作,script.js包含什么?这是一个工作版本:http://jsfiddle.net/hQNWy/7/ – 2012-02-01 13:24:11

+0

适用于我:http://jsfiddle.net/Rq7xa/ – Jamiec 2012-02-01 13:25:23

回答

3

我想你还没有包含jQuery库。

尝试包括错误控制台

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
+0

比我快4秒;) – Archer 2012-02-01 13:25:14

+1

可能值得添加,您可以使用Google CDN来源jQuery库'' – ianbarker 2012-02-01 13:34:48

+0

好的...... – GoodSp33d 2012-02-01 14:07:46

0

没有进一步的信息,我只能假设的影响之前采取该链接被跟踪为了避免这种情况(并且为了防止链接被跟着(和打开新页面)):

$('#next').click(function(){ 
    $('.button').css('height','1200'); 
    return false; 
}); 

JS Fiddle demo

返回FALSE既防止元素的默认行为(被载入到一个新的页面)停止click事件的传播,如果你只是想阻止导航方面/默认行为,您可以改用:

$('#next').click(function(e){ 
    e.preventDefault(); 
    $('.button').css('height','1200'); 
}); 

JS Fiddle demo

+0

对于这个特定的锚点,最糟糕的情况是用户将被带回到页面的顶部,因为'href'只是'#'。尽管如此,调用'preventDefault()'仍然是一个好主意,所以它们不会感到恼火。 – 2012-02-01 13:34:47

1

早安,

看起来好像你的下一个ID不正确命名的(除非我失去了一些东西)。

在你的榜样,你有下面这行:

<input type="button" id="btnNext" value="Next" class="button"/> 

此基础上,你的jQuery的需要是:

$(document).ready(function(){ 
    $('#btnNext').click(function(){ 
     $('.button').css('height','1200'); 
    }); 
}); 

让我知道,如果不工作!

JMax

+0

'next'是2个按钮旁边的锚的ID! – Jamiec 2012-02-01 13:26:33

+0

杜。谢谢。不能相信我错过了那个;)。 – 2012-02-01 13:28:25

1

这和后期的错误你似乎并没有包含对jQuery库的引用。

一下添加到头部(假设jQuery是在同一文件夹):

<script type="text/javascript" src="jquery.js" ></script>