如何在js加载的div内的元素上强制使用CSS？

Answer 1

试试这个，我用我自己的css来检查和验证这一点。

$(document).ready(() => {
    $('.items').on('click', '.item', function() {
        var page = $(this).attr('data-load');
        $('#load_items').load(page, function() {
            // Optional: Force a reflow if necessary
            $(this).hide().show(0);
        });
    });
});

body {
    font-family: Arial, sans-serif;
}

.menu {
    width: 200px;
    float: left;
    background: #f0f0f0;
    padding: 10px;
}

.items {
    list-style-type: none;
    padding: 0;
}

.item {
    padding: 10px;
    cursor: pointer;
}

.item:hover {
    background-color: #ddd;
}

.load_items_here {
    margin-left: 220px; /* Space for the menu */
    padding: 10px;
    border: 1px solid #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="menu" class="menu">
    <ul id="items" class="items">
        <li class="item" data-load="content/cars.html">Cars</li>
        <li class="item" data-load="content/games.html">Games</li>
        <li class="item" data-load="content/sport.html">Sport</li>
        <li class="item" data-load="content/news.html">News</li>
        <li class="item" data-load="content/cats.html">Cats</li>
        <li class="item" data-load="content/toys.html">Toys</li>
    </ul>

    <div id="load_items" class="load_items_here">
        <!-- Items will load here by JS code -->
    </div>
</div>