Question

I’m trying to select a specific class (in this case page1, page2, page3 etc.)

I’ve written this code that works fine for a single class, i’ve tried using .match() to exclude the .plink class picked up in dis but can’t get it working.

$(function(){
    $("a.plink").click(function() {
        var dis = $(this).attr("class");    // This is the problem line, I need it to contain 'page1' ONLY. Not 'page1 plink'.
        $("#page1,#page2,#page3").hide();
        $("#" + dis).show();
        return false;
    });
});

The HTML that is associated with this is:

<div id="page-links">
    <a class="page1 plink" href="#">About</a>
    <a class="page2 plink" href="#">History</a>
    <a class="page3 plink" href="#">Backstage</a>
</div>

EDIT:

These are the DIV’s being shown and hidden:

<div id="page1">
    <?php include_once("page1.php");?>
</div>
<div id="page2">
    <?php include_once("page2.php");?>
</div>
<div id="page3">
    <?php include_once("page3.php");?>
</div>

Is there a simple way to achieve this without regular expression matching?

Answer 1

This should be

$("." + dis).show();

for class and in your example there are all classes.

As you mentioned simple way so it could be

$("a.plink").click(function() {
    $(".plink").hide();
    $(this).show();
    return false;
});

According to your question after edit

$("a.plink").click(function() {
    $('div[id^="page"]').not('#page-links').hide();
    pid=$(this).attr('class').split(' ')[0];
    $('#'+pid).show();
    return false;
});

Here is a fiddle.