クラスをアクティブにする問題

Question

私はphp、css、jqueryを使ってウェブサイトで働いていて、1日のメニューに基づいて情報を表示しています。

liを使用して月曜日から金曜日の日を表すメニューを作成しました。

次のJqueryコードを使用して、クリックしてもボタンがアクティブになるように、クラスを追加してみました。

$(document).ready(function() { 
 
    $(".dias li").click(function() { 
 
    $(this).addClass("actidia"); 
 
    $(this).siblings().removeClass("actidia"); 
 
    return false; 
 

 
    }); 
 
});

.dias { 
 
    list-style: none; 
 
    width: 440px; 
 
    margin-top: 10px; 
 
    margin-bottom: 5px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
.dias>li { 
 
    float: left; 
 
    width: auto; 
 
    height: 28px; 
 
    line-height: 28px; 
 
    margin-right: 15px; 
 
    padding: 1px 12px 1px 12px; 
 
    font-family: Raleway; 
 
    font-size: 15px; 
 
    border: 1px solid #F90; 
 
    background-color: #F90; 
 
    -webkit-border-radius: 8px; 
 
    -moz-border-radius: 8px; 
 
    border-radius: 8px; 
 
} 
 

 
.dias>li:hover { 
 
    background-color: rgba(255, 204, 0, 0.2); 
 
    border-top: 1px solid #F60; 
 
    border-bottom: 1px solid #F60; 
 
} 
 

 
.dias>li a { 
 
    color: #111; 
 
    font-family: Raleway; 
 
    font-size: 13px; 
 
    font-weight: 400; 
 
} 
 

 
.dias>li a:hover { 
 
    color: #444; 
 
    font-family: Raleway; 
 
    font-weight: 400; 
 
    text-decoration: none; 
 
} 
 

 
.dias .actidia { 
 
    color: #555; 
 
    font-size: 13px; 
 
    font-family: Raleway; 
 
    font-weight: 400; 
 
    background-color: rgba(255, 204, 0, 0.2); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="dias"> 
 
    <li><a href="menudia_user.php?dia=<?php echo $lunes ?>">Lunes</a></li> 
 
    <li><a href="menudia_user.php?dia=<?php echo $martes ?>">Martes</a></li> 
 
    <li><a href="menudia_user.php?dia=<?php echo $miercoles ?>">Miercoles</a></li> 
 
    <li><a href="menudia_user.php?dia=<?php echo $jueves ?>">Jueves</a></li> 
 
    <li><a href="menudia_user.php?dia=<?php echo $viernes ?>">Viernes</a></li> 
 
</ul>

問題は、私はそれ私のリンクが動作しません使用するとき、私はクラスを追加し、クリック時に私のボタンをアクティブにするために偽のリターンを使用する必要がなく、ということです。私が取る場合偽の返信私のリンクは動作しますが、クラスは適用されません。私のボタンだけが点滅します。

私は多くの時間を費やして幸運なしに解決策を見つけようとしました。

この問題についてお手伝いします。

Answer 1

をクリックすると、リンクページが更新されます。だからあなたのjqueryのロジックを適用しません。あなたはPHPのロジックでそれを行うことができます。

$_GET paramを保存するには別の変数が必要です。だからあなたのPHPコード内の変数の下に宣言します。

$dia = isset($_GET['dia']) ?$_GET['dia']:''; 

あなたhref変数とアクティブクラスチェック$diaを適用します。両方が等しい場合、アクティブなクラスを適用します。コード&の下に使用することは

<li class="<?php echo $dia==$lunes?'actidia':''; ?>"><a href="menudia_user.php?dia=<?php echo $lunes; ?>">Lunes</a></li>