根据URL（GET）使DIV显示无或阻止

I would like to make a system where a user click a page number and the div with the page ID as its ID displays block whilst the rest displays none.

Here is what code I have already:

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

And the div is echo'd out in a foreach loop with the array_chunk() function. Here is the div in it's form before echo'ing out:

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

End result for example would be

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

I have tried using inline styles and getting JS to change it, I have also used php if statements then use html inside the statement to get the style tags to change it.

NO LUCK... Help please.

The id should not contain spaces.

As an HTML element can have only one id, but,

it can have multiple classes separated by spaces.

But, class can have.

Thus:

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

Change it to

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

And make changes accordingly, it must work.

Refer the corrected code below:

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

EDIT:

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

your ID is containing a space, try using a class instead. or you can use that and call that in your jQuery as $('#article-page page-". $page_num ."').css(......)