javascript - 根据 URL (GET) 使 DIV 不显示或阻止

Question

我想制作一个系统，用户点击一个页码，页面 ID 作为其 ID 的 div 显示 block ，而其余部分不显示。

这是我已有的代码:

<script type="text/javascript">
//initialize page divs
$('#page-1').css('display', 'none');
$('#page-2').css('display', 'none');
</script>
<?php
if(isset($_GET['page'])){
    $page = $_GET['page']; ?>
    <script type="text/javascript">
        $('#page-<?php echo $page; ?>').css('display', 'block');
    </script><?php
} else {
    $page = "1"; ?>
    <script>
        $('#page-<?php echo $page; ?>').css('display', 'block');
    </script><?php
}
?>

并且 div 在 foreach 循环中通过 array_chunk() 函数回显出来。这是回显之前的形式的 div:

<?php
    $page_num = '0';
    foreach (array_chunk($articles, 9, true) as $pre_array) {
        $page_num = $page_num +1;
        $div_id = "<div id=\"article-page\" class=\"page-". $page_num ."\">";
        echo $div_id;
        foreach (array_chunk($pre_array, 3, true) as $array){
        echo '<div class="section group">';
        foreach ($array as $article) { ?>
                <div class="col span_1_of_3"><a href="article.php?id=<?php echo $article['article_id']; ?>"><?php echo $article['article_title']; ?></a><br /> <?php $article_content = $article['article_content']; if(strlen($article_content)<30) { echo $article_content; } else { echo("" . substr($article_content, 0, 30) . "..."); }?><br /><small>Posted <?php echo date('l dS F Y', $article['article_timestamp']); ?></small></div>
            <?php }
        echo '</div>';
        }
        echo '</div>';
    } ?>

例如最终结果是

<div id="article-page page-1">

我试过使用内联样式并让 JS 更改它，我还使用 php if 语句然后在语句中使用 html 来获取样式标签来更改它。

运气不好...请帮忙。

Answer 1

id 不应包含空格。

作为一个 HTML 元素只能有一个 id，但是，

它可以有多个 class，用空格分隔。

但是，class 可以有。

因此:

<div id=\"article-page page-". $page_num ."\">

改成

<div id=\"article-page" class=\"page-". $page_num ."\">

并进行相应的更改，它必须有效。

引用下面更正的代码:

<script type="text/javascript">
//initialize page divs
$('.page-1').css('display', 'none');
$('.page-2').css('display', 'none');
</script>
<?php
$page = (isset($_GET['page'])) ? $_GET['page'] : 1;
?>
<script type="text/javascript">
  $('.page-<?php echo $page; ?>').css('display', 'block');
</script>

编辑:

<script type="text/javascript">
$(function(){
  $('.page-<?php echo $page; ?>').css('display', 'block');
});
</script>