Javascript 根据URL使DIV显示none或block（GET）

我想制作一个系统，其中用户单击一个页码，以页面ID作为ID的div显示block，而其余显示none

以下是我已经拥有的代码：

<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
}
?>

//初始化页divs
$（'page-1'）.css（'display'，'none'）；
$（'page-2'）.css（'display'，'none'）；
$（'page-'）.css（'display'，'block'）；
$（'page-'）.css（'display'，'block'）；

div通过array_chunk（）函数在foreach循环中回显。 这是回显前的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来获得样式标记来更改它

---

没有运气。。。请帮助。

id不应包含空格

作为

HTML

元素，只能有一个

id

，但是

它可以有多个用空格分隔的

类

但是，
class
可以有

因此：



换成

<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>


//初始化页divs
$（'.page-1'）.css（'display'，'none'）；
$（'.page-2'）.css（'display'，'none'）；
$（'.page-'）.css（'display'，'block'）；

编辑：


$（函数（）{
$（'.page-'）.css（'display'，'block'）；
});
您的ID包含空格，请尝试改用类。或者您可以使用它并在jQuery中将其称为
$（“#文章页面-“$page\u num.”）。css（……）
不幸的是，这不起作用，我很困惑，因为它应该起作用，但必须起作用。请在打印这两个div的位置共享您的HTML。我刚刚将其添加到问题中，请参见代码段2。请尝试更新$div_id=“”；至$div_id=''；让我们看看，谁和为什么投票否决了这个问题？
<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>