Question

我正在尝试创建一个主题切换器，用户可以通过单击按钮来更改网站主题。我不想使用本地存储或cookie。我正在尝试使用xml。我可以将样式表附加到xml文件并运行html。但这会强制xml文件中的样式更改。 HTML页面不会改变。我该怎么做呢请帮忙。

    <html>
<body>
    <h3>Populate Data from XML file using Jquery</h3>
    <input id="btnGetData" type="button" value="Populate Data from XML File" />
    <div id="UpdatePanel" style="padding:20px 10px">
        <form action="datacheck.xml">
            <input type="submit" value="blue">
        </form>
        <form action="datacheck1.xml">
            <input type="submit" value="red">
        </form>
        <form action="datacheck2.xml">
            <input type="submit" value="green">
        </form>
    </div>
</body>
<script src="jquery-1.11.1.min.js"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("#btnGetData").click(function () {
            $("#UpdatePanel").html("Please wait...");
            $.ajax({
                url: "datacheck.xml",
    url:"datacheck1.xml",
                type: "GET",
                dataType: "xml",
                success: OnSuccess,
                error: OnError
            });
        });
    });

    function OnSuccess(xml) {
        var tableContent = "
                <table border='1' cellspacing='0' cellpadding='5'>" +
                            "
                    <tr>" +
                                "
                        <th>TITLE</th>" +
                                "
                        <th>ARTIST</th>" +
                                "
                        <th>COUNTRY</th>" +
                                "
                        <th>COMPANY</th>" +
                                "
                        <th>PRICE</th>" +
                                "
                        <th>YEAR</th>" +
                            "
                    </tr>";
        $(xml).find('CD').each(function () {
            tableContent += "
                    <tr>" +
                                "
                        <td>" + $(this).find('TITLE').text() + "</td>" +
                                "
                        <td>" + $(this).find('ARTIST').text() + "</td>" +
                                "
                        <td>" + $(this).find('COUNTRY').text() + "</td>" +
                                "
                        <td>" + $(this).find('COMPANY').text() + "</td>" +
                                "
                        <td>" + $(this).find('PRICE').text() + "</td>" +
                                "
                        <td>" + $(this).find('YEAR').text() + "</td>" +
                            "
                    </tr>";
        });
        tableContent += "
                </table>";
        $("#UpdatePanel").html(tableContent);
    }

    function OnError(data) {
        $("#UpdatePanel").html("Error! Please try again.");
    }



</script>

Answer 1

您正在加载XML内容，但不是它的CSS。要更改HTML css，您必须动态更改文件源：

$(document).ready(function() {
  $('.btn').click(function() {
    $('#style').attr('href', $(this).data('url'))
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/cerulean/bootstrap.min.css" id="style">
<div class="wrapper">
  <div class="btn btn-success" data-url="https://bootswatch.com/cerulean/bootstrap.min.css">style 1</div>
  <div class="btn btn-primary" data-url="https://bootswatch.com/slate/bootstrap.min.css">style 2</div>
</div>

使用xml中包含的样式表将样式应用于html页面

1 个答案: