Javascript 它在div上显示而不是使用show/hide。结果会是这样的： $(document).ready(function() { $('a.plink').click(function() { var id = $.trim(this.className.replace('plink', '')); /*adding a "page" class to each of the page divs makes hiding the visible one a bit easier*/ $('div.page').hide(); /*otherwise use the version from sheikh*/ //$('div[id^="page"]').not('#page-links').hide(); $('div#' + id).show(); }); });

标记：

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

脚本：

$(document).ready(function() {
    $('a.plink').click(function() {
        var id = $(this).attr('href');
        $('.active').removeClass('active');
        $(this).addClass('active');
        $('div' + id).addClass('active');
    });
});

或者小提琴

---

哦，为了回答标题问题，而不仅仅是描述的最终行为

var classes = this.className.split(' ');
var id;
for (var i = 0; i < classes.length; i++) {
    if(classes[i].substring(4) === classes[i].replace('page', '')) {
        id = classes[i];
        break;
    }
}

var classes=this.className.split（“”）；
变量id；
对于（var i=0；i

---

应该以

id

结束，其中包含与单击的链接相关联的“page#”值，而不管其在类列表中的位置如何。

如果我只是做了一个小调整来修复现有结构，我会这样做：

$(document).ready(function() {
    $('a.plink').click(function() {
        var id = $.trim(this.className.replace('plink', ''));

        /*adding a "page" class to each of the page divs makes hiding the visible one a bit easier*/
        $('div.page').hide(); 

        /*otherwise use the version from sheikh*/
        //$('div[id^="page"]').not('#page-links').hide();

        $('div#' + id).show();
    });
});

我建议对现有标记进行的主要更改是在每个页面div中添加一个公共“page”类。这是一个

---

如果我从零开始，我可能会采取稍微不同的方法，定义一个“活动”类并切换哪些元素有它，而不是在div上使用show/hide。结果会是这样的：

$(document).ready(function() {
    $('a.plink').click(function() {
        var id = $.trim(this.className.replace('plink', ''));

        /*adding a "page" class to each of the page divs makes hiding the visible one a bit easier*/
        $('div.page').hide(); 

        /*otherwise use the version from sheikh*/
        //$('div[id^="page"]').not('#page-links').hide();

        $('div#' + id).show();
    });
});

标记：

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

脚本：

$(document).ready(function() {
    $('a.plink').click(function() {
        var id = $(this).attr('href');
        $('.active').removeClass('active');
        $(this).addClass('active');
        $('div' + id).addClass('active');
    });
});

或者小提琴

---

哦，为了回答标题问题，而不仅仅是描述的最终行为

var classes = this.className.split(' ');
var id;
for (var i = 0; i < classes.length; i++) {
    if(classes[i].substring(4) === classes[i].replace('page', '')) {
        id = classes[i];
        break;
    }
}

var classes=this.className.split（“”）；
变量id；
对于（var i=0；i

---

---

应该以

id

结束，其中包含与单击的链接相关联的“page#”值，而不管其在类列表中的位置如何。

指的是id。

指的是类。例如，试着使用

.page1

，我不太理解你的问题。是否要从类为“page2”的div中删除plink类$（“.page1”）。移除类（“plink”）；您使用类而不是id-类是泛型的，id是唯一的对不起，不清楚，#page1，#page2 DIV正在显示和隐藏，我用与DIV同名的类命名标记。

指id。

指类。例如，试着使用

.page1

，我不太理解你的问题。是否要从类为“page2”的div中删除plink类$（“.page1”）。移除类（“plink”）；您使用类而不是id-类是泛型的，id是唯一的对不起，不清楚，#page1，#page2 DIV正在显示和隐藏，我用与DIV同名的类命名标记。@ManseUK谢谢，我必须替换class string中的'plink'！对不起，我的第一个问题不清楚。这个答案肯定是对的（我认为）。。。Jquery仍然很不错：（我的Jquery工作得很好，只要我没有

.plink

作为链接的类。我也不能使用container div作为选择器，因为页面上还有其他链接将使用此函数。谢谢你的回答：）@DavidBarker好的，我更正它。。。首先，我选择id为page*…的所有页面。。。然后我把所有的都藏起来，只显示“#”+dis页面谢谢！这很有效。。。虽然我有很多以“page”开头的DIV。。。现在隐藏起来了：）我会仔细检查并更改它们，除非有其他方法填充

var页面

？@ManseUK谢谢，我必须用string替换“plink”！对不起，我的第一个问题不清楚。这个答案肯定是对的（我认为）。。。Jquery仍然很不错：（我的Jquery工作得很好，只要我没有

.plink

作为链接的类。我也不能使用container div作为选择器，因为页面上还有其他链接将使用此函数。谢谢你的回答：）@DavidBarker好的，我更正它。。。首先，我选择id为page*…的所有页面。。。然后我把所有的都藏起来，只显示“#”+dis页面谢谢！这很有效。。。虽然我有很多以“page”开头的DIV。。。现在隐藏起来了：）我会仔细检查并更改它们，除非有其他方法填充

var页面

？不，这不正确，但不是你的错，因为我没有正确回答这个问题。我现在已经包括了我正在显示和隐藏的具有ID的DIV。谢谢谢赫·赫拉，使用

DIV[ID^=“page”]

对我来说是新的，因为它是

split（）

在阅读了关于它们的文档后，我现在理解了它们。真的很有帮助。不，这是不对的，但不是你的错，因为我没有正确回答这个问题。我现在已经包括了我正在显示和隐藏的具有ID的DIV。谢谢谢赫·赫拉，使用

DIV[ID^=“page”]

对我来说是新的，因为它是

split（）

在阅读了关于它们的文档后，我现在理解了它们。真的很有帮助。我已经添加了显示和隐藏ID的HTML。我的问题是确保var

dis

的值只包括“page1”而不是“page1 plink”。您可以使用split方法。var split_dis=dis.split（“”）；split_dis[0]包含“page1”，split_dis[1]包含“plink”谢谢Daniel，还有其他人，您向我展示了我不知道的

split（）

。）我已经添加了显示和隐藏的HTML，它们都是ID。我的问题是确保var

dis

的值只包括“page1”而不是“page1 plink”。您可以使用split方法。var split_dis=dis.split（“”）；split_dis[0]包含“page1”，split_dis[1]包含“plink”谢谢Daniel，还有其他人，您向我展示了我不知道的

split（）

。）谢谢你的回答m232，我对JQuery不太清楚，虽然+1的链接。我肯定会在将来使用

href

值来清除我的代码。感谢你的回答m232，我在JQuery上不清楚，尽管链接是+1。将来我肯定会使用

href

值来清理我的代码。谢谢supr，我一直很小心在JS中使用正则表达式（不知道为什么，但我并不特别喜欢使用

$(function(){
  $("a.plink").click(function() {
     var dis = $(this).attr("class");
    $(".page1,.page2,.page3").hide();
    $("." + dis).show();
    return false;
  });
});

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

$(".page1 plink").show();

 $(".page1 .plink").show();

var klasses $("a.plink");

var yourClasses = Array();
for(var klass in klasses)
{
  var word = klass.attr('class').replace(" plink", "");
  yourClasses.push(word);
}

// Regex for extracting pageXX
var reg = /^(.*\s)?(page\d+)([^\d].*)?$/;
dis = reg.exec(dis)[2];

$(document).ready(function() {
    $('a.plink').click(function() {
        var id = $.trim(this.className.replace('plink', ''));

        /*adding a "page" class to each of the page divs makes hiding the visible one a bit easier*/
        $('div.page').hide(); 

        /*otherwise use the version from sheikh*/
        //$('div[id^="page"]').not('#page-links').hide();

        $('div#' + id).show();
    });
});

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

div.page
{
    height: 300px;
    display:none;
}
div.page.active
{
    display:block;
}
a.plink
{
    padding-left:5px;
    padding-right:5px;
}
a.plink.active
{
    background-color:#ddd;
}
div#page1
{
    background-color:blue;
}
div#page2
{
    background-color:green;
}
div#page3
{
    background-color:red;
}

$(document).ready(function() {
    $('a.plink').click(function() {
        var id = $(this).attr('href');
        $('.active').removeClass('active');
        $(this).addClass('active');
        $('div' + id).addClass('active');
    });
});

var classes = this.className.split(' ');
var id;
for (var i = 0; i < classes.length; i++) {
    if(classes[i].substring(4) === classes[i].replace('page', '')) {
        id = classes[i];
        break;
    }
}