Question

我仍然试图围绕控制器功能和URL请求之间的关系。

这就是我想要完成的事情：

我有一个包含完整HTML页面的视图（没有模板）。在此页面上，我希望用户能够从链接列表中选择主题。每个主题都有一个单独的CSS文件。我希望所选链接将值传递给控制器，然后使用$ data数组将不同的CSS文件重新加载到相同的视图。

如果我上面描述的场景是可能的，或者有更聪明的解决方案，那么我非常感谢任何帮助或建议。

基本视图/控制器结构：

我用“??????????

标记了我不理解的一切

控制器/ Demos.php

public function ?????????
{
    $data['theme'] = array(
        'Normal' => "normal.css",
        'Dark' => "dark.css",
        'Light' => "light.css",
        'Ultraviolet' => "ultraviolet.css"
    );

    $this->load->view('demos/themeswap', $data);

视图/演示/ themeswap.php

<!DOCTYPE html>

<html lang="en-us">
<head>
    <meta charset="utf-8">
    <title>Theme Swap Demo</title>

    <link rel="stylesheet" href="/assets/css/<?php echo $theme ?>.css" media="screen" />
</head>
<body>
    <header>
        <h1>Theme Swap Demo</h1>
        <nav>
            <ul>
                <li><a href="?????????">Standard</a></li>
                <li><a href="?????????">Dark</a></li>
                <li><a href="?????????">Light</a></li>
                <li><a href="?????????">Ultraviolet</a></li>
            </ul>
        </nav>
    </header>
<main>
    <h1>Some Rock-Solid Content</h1>
    <p>Behold! I am a paragraph!</p>
</main>
<footer>
    <p>What an amazing footer.</p>
</footer>

Answer 1

你的第一个?????? （方法名称）应如下所示：

div

然后，或者你的themeswap.php视图：

box

在您的网址结构中，如果配置为删除index.php而不定义自定义路由，则通常会public function theme($theme)。

有关此here的更多信息。

Answer 2

为什么不使用jquery尝试它，使用锚标签重定向非常简单可靠。

<ul class="change_theme">
    <li data-theme="Standard">Standard</li>
    <li data-theme="Dark">Dark</li>
    <li data-theme="Light">Light</li>
    <li data-theme="Ultraviolet">Ultraviolet</li>
</ul>

设计主题就像在主体标签更改中更改一个类一样，将在整个页面中应用

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var current_theme = "Standard";
              $('.change_theme [data-theme]').click(function(e) {
                e.preventDefault();
                var new_theme = $(this).data('theme');
                $('body').removeClass(current_theme);
                $('body').addClass(new_theme);
                current_theme = new_theme;
              });
        });

    </script>

小提琴上的

demo

CodeIgniter 3 - 使用不同的CSS主题重新加载视图

2 个答案: