Javascript 使用php动态更改css_Javascript_Php

Javascript 使用php动态更改css

javascript php

Javascript 使用php动态更改css,javascript,php,Javascript,Php,大家好，我正在开发一个使用物化css框架和php作为后端的网站。当我登录网站时，我想更改登录按钮的类别，使其不再可见。和一个注销按钮的类，以便它可以被看到。下面是我在index.php顶部启动会话的代码 <head>  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"

大家好，我正在开发一个使用物化css框架和php作为后端的网站。当我登录网站时，我想更改登录按钮的类别，使其不再可见。和一个注销按钮的类，以便它可以被看到。下面是我在index.php顶部启动会话的代码

<head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
    <link rel="stylesheet" href="css/main.css">
    <script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js"
            integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Travelville</title>
    <?php
        include 'members_dB.php';
        session_start();
    ?>


Travelville

这是我的密码。php：我希望按钮在哪里

<ul class = "right hide-on-med-and-down"> <!--Will hide on-med..-->
<li>
    <div class ="input-field">
        <input type="text" class ="white grey-text autocomplete"
        id ="autocomplete-input" placeholder="Aruba, Cancun, etc.."
         >
    </div>
</li>
<li>
    <?php
    //session_start();
    if(isset($_SESSION['valid_user'])){
            $class = 'class="waves-effect waves-light btn scale-transition scale-out"';
            $classL = 'class="waves-effect waves-light btn scale-transition"';
    } else {
            $class = 'class="waves-effect waves-light btn scale-transition"';
            $classL = 'class="waves-effect waves-light btn scale-transition scale-out"';
    }
    ?>
    <a  href = "#login" id = "login"
    <?php  echo $class ?> >
        <span>Log in </span>
    <i class="large material-icons right">computer</i></a>
</li>
<li>
    <a  href = "cart.php"
    class="waves-effect waves-light btn">
        <span>Cart </span>
    <i class="large material-icons right">shopping_cart</i></a>
</li>
<li>
    <a  href = "#" id = "logout"
    <?php  echo $classL ?> >
        <span>Log Out </span>
    <i class="large material-icons right">computer</i></a>
</li>
</ul>

<!--Log in section-->
<section id ="login" class ="section section-popular scrollspy">
<div class ="container">
<div class="row">
<?php
check_login();
if (isset($_SESSION['valid_user'])) {

        echo '<p>You are logged in as: '.$_SESSION['valid_user'].' <br />';                                                                                                      echo '<a href="logout.php">Log out</a></p>';
} else {
    if (isset($userid))  {
        // if they've tried and failed to log in
        echo '<p>Could not log you in.</p>';
    } else {
        they have not tried to log in yet or have logged out
        echo '<p>You are not logged in.</p>';
    }
    echo '<form  class="col s12"  action="index.php" method="post">';
    echo '<div  class="row">';
    echo '<div class="input-field col s12">';
            echo '<input placeholder="Username" id="username"
            name = "username" type="text" class="validate">';
            echo '<label for="first_name">First Name</label>';
    echo '</div>';
    echo '</div>';

    echo '<div class="row">';
    echo '<div class="input-field col s12">';
        echo '<input placeholder = "Password" id = "password"
            name = "password" type="password" class="validate">';
        echo '<label for="password">Password</label>';
    echo '</div>';
    echo '</div>';
    //<!--<button type="submit" name="login" id = "button">Login</button> -->
    echo '<input id = "login" type ="submit" value ="Login"
            id="refresh"
    class="btn">';
    echo '<input id = "show" type ="submit" value ="Sign up" class =
                    "waves-effect waves-light btn scale-transition scale-out">';
    echo '</form>';
}
?>
</div>
</div>
</section>


您需要学习AJAX。只是一个评论。为什么不已经制作好CSS，然后只添加一个JavaScript元素。className？我建议您使用JavaScript来实现这一点。@StackSlave我不熟悉AJAX。我将如何实现我试图用AJAX做的事情，AJAX会取代php吗？我还可以在AJAZ中使用materialize框架吗？您应该阅读有关sql注入和存储普通密码的内容（您正在做这两件事）。我会使用准备好的语句。
<?php
error_reporting(0);
function check_login(){
    if (isset($_POST['username']) && isset($_POST['password'])){
        // if the user has just tried to log in
        $username = $_POST['username'];
        $password = $_POST['password'];

        $db_conn = new mysqli('localhost', 'root', 'password', 'trav_dB');

        if (mysqli_connect_errno()) {
            echo 'Connection to database failed:'.mysqli_connect_error();
            exit();
        }
        $query = "SELECT *FROM `customers` WHERE   username='".$username."' AND   password = '".$password."'  ";
        $result = $db_conn->query($query);
        if ($result->num_rows) {
            // if they are in the database register the user id
            $_SESSION['valid_user'] = $username;
        }
        $db_conn->close();
    }
}
?>