如何将按钮放入选项卡中

<style>
    .tab-container {
        width: 400px;
        height: 300px;
        border: 1px solid #ccc;
    }

    .tab-labels {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

    .tab-labels li {
        display: inline-block;
        width: 100px;
        height: 30px;
        background-color: #ccc;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
    }

    .tab-content {
        display: none;
        padding: 10px;
    }
</style>

<div class="tab-container">
    <ul class="tab-labels">
        <li onclick="showTab(0)">Tab 1</li>
        <li onclick="showTab(1)">Tab 2</li>
        <li onclick="showTab(2)">Tab 3</li>
    </ul>
    <div class="tab-content" id="tab1">Content 1</div>
    <div class="tab-content" id="tab2">Content 2</div>
    <div class="tab-content" id="tab3">Content 3</div>
</div>

<script>
    function showTab(tabIndex) {
        var contents = document.getElementsByClassName('tab-content');
        for (var i = 0; i < contents.length; i++) {
            contents[i].style.display = 'none';
        }
        contents[tabIndex].style.display = 'block';
    }
</script>