在动态选择或点击中更改CSS中的Div或样式

时间:2013-04-29 19:43:18

标签: javascript jquery html5 jquery-ui

我有以下问题:我有一个外部div和内部div我需要更改以动态匹配我的设备属性的大小。正如你所看到的,我有一个点击功能可以拉动标题中的宽度和高度,但是需要同时将大小调整应用于内部div,外部div和iframe以及更新背景图像以匹配。我已经为div尝试了一些onclick函数但没有运气... Fiddle有基本默认视图的CSS,只需要弄清楚如何应用于select或click我的选择。 http://jsfiddle.net/jZJc3/

`<ul class="nav nav-pills left">
    <li class="dropdown">
 <a class="dropdown-toggle" data-toggle="dropdown" href="#" id="device">Device</a>
   <ul class="dropdown-menu" id="devices">
<li data-deviceid=1><a href="#" onClick="ResizeElement()">iPad 768x1024h</a></li>
    <li data-deviceid=2><a href="#">iPhone 5 320x568h</a></li>
    <li data-deviceid=3><a href="#">iPhone 3-4 320x480h</a></li>
 <li data-deviceid=4><a href="#">Tablet 600x1024h</a></li>  
</ul>
</li>
</ul>
<div id="iphone"><div id="mobilecontent" class="mobilecontent">
<iframe id="ui_frame" src="http://voicefusion.com/iframe.htm" style="width:320px; height:480px;" class="mobilecontent" frameborder="0"></iframe>
</div>
</div>`

1 个答案:

答案 0 :(得分:0)

http://jsfiddle.net/W37nF/1/

在CSS中使用hide类我能够做我需要的......

$('select').on('change', function(){
var val = $(this).val();
$('div').hide();
$('.' + val).css('display','block'); }).change();