Javascript 单击CSS选项卡，设置php变量？

我有下面的“纯CSS选项卡”代码。我想做的是加载PLAYER_代码include文件，但在单击选项卡时将变量设置为一个值单击选项卡1时，$cat变量应设置为“音乐” -单击选项卡2时，$cat变量应设置为“radio” -单击选项卡3时，$cat变量应设置为“books”

这样，播放机代码include将调出正确的媒体

<div class="pc-tab">
        <input checked="checked" id="tab1" type="radio" name="pct" />
        <input id="tab2" type="radio" name="pct" />
        <input id="tab3" type="radio" name="pct" />
          <nav>
            <ul>
              <li class="tab1">
                <label for="tab1">Music</label>
              </li>
              <li class="tab2">
                <label for="tab2">Radio</label>
              </li>
              <li class="tab3">
                <label for="tab3">Books</label>
              </li>
            </ul>
          </nav>
          <section>
            <div class="tab1">Tab 01 <!-- $cat set to "music" -->
                <?php include 'player_code.php'; ?>
            </div>           

            <div class="tab2">Tab 02 <!-- $cat set to "radio" -->
                <?php include 'player_code.php'; ?>
            </div>

            <div class="tab3">Tab 03 <!-- $cat set to "books" -->
                <?php include 'player_code.php'; ?>
            </div>
          </section>
        </div>

音乐


无线电


书


表01
表02
表03

后端的Php进程。根据发布的代码，您似乎需要交互式前端功能

您可以编辑以重新提交到后端，也可以使用ajax获取响应并在所需的部分中解析它

下面是使用后端

<?php
    // Init.
    $sFileName = '';
    $sName     = '';

    $aGet = $_GET;
    $sName = ( empty( $aGet[ 'type' ] ) ? '' : $aGet[ 'type' ] );
?>
<div class="pc-tab">
    <input checked="checked" id="tab1" type="radio" name="pct" />
    <input id="tab2" type="radio" name="pct" />
    <input id="tab3" type="radio" name="pct" />
    <nav>
        <ul>
            <li class="tab1">
            <label for="tab1"><a href="?type=music">Music<a/></label>
            </li>
            <li class="tab2">
            <label for="tab2">><a href="?type=radio">Radio<a/></label>
            </li>
            <li class="tab3">
            <label for="tab3">><a href="?type=books">Books<a/></label>
            </li>
        </ul>
    </nav>
    <section>
        <div class="tab1"><?php echo $sName; ?>
            <?php 
            if( !empty( $sName ) )
            {
                require_once( $sName . '.php' );
            }
            ?>
        </div>           
    </section>
</div>

音乐


>无线电


>书

是的，但不是那么熟悉-我现在就来看看。你能推荐什么资源吗？或者作为jQuery的一部分（jQuery是JavaScript库）在StckOvrFl上看到了这一点“您不能使用JavaScript更改php值。也就是说，服务器脚本在客户端脚本生效后首先运行，在这种情况下，您不能修改相同的脚本，因为它们已经在浏览器中呈现”也许我需要使用纯JS（变量）来完成？这取决于你想要什么我正在寻找前端解决方案（你是对的）我正在努力避免重新加载页面。