Coldfusion选项卡创建javascript样式宽度

<cfoutput>
    <style>
        .tab-container {
            width: 500px;
        }
        .tab {
            display: inline-block;
            padding: 10px;
            background-color: #ccc;
            cursor: pointer;
        }
        .tab.active {
            background-color: #f00;
        }
        .content {
            display: none;
            padding: 10px;
            background-color: #f00;
        }
        .content.active {
            display: block;
        }
    </style>

    <div class="tab-container">
        <div class="tab" onclick="changeTab(1)">Tab 1</div>
        <div class="tab" onclick="changeTab(2)">Tab 2</div>
        <div class="tab" onclick="changeTab(3)">Tab 3</div>
    </div>

    <div class="content" id="content1">
        Content 1
    </div>
    <div class="content" id="content2">
        Content 2
    </div>
    <div class="content" id="content3">
        Content 3
    </div>

    <script>
        function changeTab(tabIndex) {
            var tabs = document.getElementsByClassName("tab");
            var contents = document.getElementsByClassName("content");

            for (var i = 0; i < tabs.length; i++) {
                tabs[i].classList.remove("active");
                contents[i].classList.remove("active");
            }

            tabs[tabIndex - 1].classList.add("active");
            contents[tabIndex - 1].classList.add("active");
        }
    </script>
</cfoutput>