javascript - 在 CSS 中动态更改 div 或样式 onSelect 或 Click

Question

我有以下问题：我需要更改外部 div 和内部 div 以动态匹配设备属性的大小。如您所见，我有一个点击功能，可以拉取标题中的宽度和高度，但需要同时将大小应用于内部 div、外部 div 和 iframe 以及更新背景图像以匹配。我已经为 div 尝试了一些 onclick 功能，但没有运气...... Fiddle 具有基本默认视图的 CSS，只需要弄清楚如何应用选择或单击我的选择。 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>`

Answer 1

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

在 CSS 中使用隐藏类我能够做我需要的事情......

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