Coldfusion 选项卡创建 javascript 样式宽度答案

【问题标题】：Coldfusion tabs create javascript style widthColdfusion 选项卡创建 javascript 样式宽度
【发布时间】：2016-08-22 14:18:57
【问题描述】：

这里是coldfusion的新人。我需要更改选项卡区域的宽度。这是我目前拥有的以下代码：

<script>
   $(document).ready(function() {
       var x = screen.width - 100;

       console.log(x);
       $("[name=theTabs]").css({'width':x + 'px'});
   });
</script>
<cflayout name="theTabs" type="tab" style="width: 10px;">

一旦页面加载完毕，标签区域的宽度还是10px....

我做错了什么？

【问题讨论】：

强制性说明/“唠叨”，您应该真正远离 ColdFusion 的标记标签并自己创建 HTML/CSS。你会在路上为自己省去很多麻烦。这是example for cflayout-tab。

标签： javascript coldfusion tabs coldfusion-10

【解决方案1】：

有 4 个元素需要调整大小。

我不知道 100% 是否重要，但您可能希望将脚本放在 cflayout 之后，以确保它在尝试对其运行 js 之前呈现在页面中。

<cflayout name="theTabs" type="tab" style="width: 10px;"></cflayout>
<script>
   $(document).ready(function() {
        var x = screen.width - 100;
        console.log(x);
        $("#theTabs").css({'width':x +'px'});
        $(".x-tab-panel").css({'width':x +'px'});
        $(".x-tab-panel-header").css({'width':(x-2) +'px'});
        $(".x-tab-panel-body").css({'width':(x-2) +'px'});
   });
</script>

【讨论】：