Jquery 带有活动链接和URL参数的DIV开关

我正在尝试使用活动链接从URL参数进行div切换。六个

s，六个链接；可能更多，也可能更少

我希望使用活动链接开关加载URL参数，例如

page.html？option=c2

此时，使用URL参数加载正确的内容，但不使用活动链接，

onclick

active

Opera和wrap div有问题

以下是我目前的代码：

$(window).load(function(){
    var option = 'c1';
    var url = window.location.href;
    option = url.match(/option=(.*)/)[1];
    showDiv(option);    

    function showDiv(option) {
     $('#' + option).show();
    }   
$('#con1b a').click(
    function() {
    var showThis = $(this).attr('name');
    $('.active').removeClass('active');
    $(this).addClass('active');
    $('#wrap > div').hide();
    $('#' + showThis).show();
    return false;
    }); 
});

这是什么

#con1b a.active {color:#ff3300; text-decoration: none;}
#wrap div {display: none;}

这是什么

<div id="con1b">
<a href="javascript:showDiv('c1')" name="c1">Link C1</a>
<a href="javascript:showDiv('c2')" name="c2">Link C2</a>
<a href="javascript:showDiv('c3')" name="c3">Link C3</a>
<a href="javascript:showDiv('c4')" name="c4">Link C4</a>
<a href="javascript:showDiv('c5')" name="c5">Link C5</a>
<a href="javascript:showDiv('c6')" name="c6">Link C6</a>

C1含量
C2含量
C3含量
C4含量
C5含量
C6含量

举例

---

在没有链接的情况下为div加载正确的内容（红色）。

到目前为止，如果我没弄错，您有两个问题：

$('#wrap > div').hide();

这在opera中不起作用，您希望将我通过url参数选项=*

一,

给你的链接一个id，并设置活动链接

链路C1 函数showDiv（选件）{ $（'#'+选项）.show（）； $（'#l'+选项）.addClass（'active'）； }

只是一个增强：

链路C1

应替换为：

 <a class="linkme" name="c1">Link C1</a>

 $('.linkme').click(function() {
    var option = $(this).attr('name');
    showDiv(option);
 });

链接C1 $（'.linkme'）。单击（函数（）{ var option=$（this.attr（'name'）； showDiv（可选）； }); 这并不完美，但我希望你明白我的意思

另一编辑： 很抱歉这么说，但你不能在Opera 10.10中使用，我刚刚安装并检查了它。

---

这似乎是一个jquery（bug）问题。错误控制台刚刚告诉我，这不是您的代码，而是来自jquery的代码。

这就是您要查找的代码：

首先删除name属性，因为它是不必要的，而只是为我们提供一个应用于所有要控制内容隐藏/显示的链接的类。另外，将

href

更改为直接针对ID，这样，如果用户由于某种上帝不允许的原因没有启用JS，他们将获得典型的跳转行为。因为我们希望它像这样降级，所以我们不会用CSS隐藏内容——我们将直接使用jQuery的show和hide方法

<div id="con1b">
    <a href="#c1" class="content-link">Link C1</a>
    <a href="#c2" class="content-link">Link C2</a>
    <a href="#c3" class="content-link">Link C3</a>
    <a href="#c4" class="content-link">Link C4</a>
    <a href="#c5" class="content-link">Link C5</a>
    <a href="#c6" class="content-link">Link C6</a>
</div>
<div id="wrap">
    <div id="c1" class="content-container">C1 Content</div>
    <div id="c2" class="content-container">C2 Content</div>
    <div id="c3" class="content-container">C3 Content</div>
    <div id="c4" class="content-container">C4 Content</div>
    <div id="c5" class="content-container">C5 Content</div>
    <div id="c6" class="content-container">C6 Content</div>
</div>

---

有些代词有时很重要。感谢您的回答，将wrap div改为两个变体，并在没有增强的情况下显示div选项，行为与以前相同。不幸的是，快到午夜的时候，我们明天会看到增强版。谢谢你，朱利安。非常感谢你，到目前为止，我一直都在努力工作，没有2。加强上述链接的工作方式和地点。在wrap上与子对象一起工作，没有加载fine，但在onClick上作为堆栈附加其他div。Opera（我看10.10）忽略了加载活动链接颜色。在Dom元素检查中，它加载#wrap as块，但将#wrap div作为display none覆盖任何后续值。可能是CSS问题，需要一些完整的>路径>参考Hanks Julian的时间和精力。我以一种与神童相似的感觉回答，我知道截止线在哪里。这个周末我有一些想法，要么香草上升（没有活动的url），要么Jsq下降。或者fork it，两个版本，但是必须在body和head部分的这一部分中编写，以避免page.html？option=xx e.t.c.的加载问题。嗯，想想看，可能仍然比以前做的工作要少。祝你周末愉快，谢谢。ChrisEverything与jQuery 1.3.2（也是最小值）Safari 3、IOS 3、Opera降低到8.21x、FF检查到3.6.6（尚未检查IE）配合使用。没有太多的时间来进一步研究它。感谢你的想法和涂鸦，我已经添加了一个外部链接来显示我在哪里。URL P不是很好，我需要使用什么URL来同步与上面链接的内容？现在快到迷人的时刻了，我明天会再查的，谢谢。内容切换，但没有活动链接（也在涂鸦中），与朱利安·希尔的歌剧问题相同。就像我说的，我想我缺少了一些关于URl P的东西，你如何使用URl P访问这个链接以将链接设置为活动的？我会在上面设置一个

active

类。

：active

状态对于这种类型的东西没有多大用处。更新的代码和提琴。嘿，谢谢你的时间和更新，如果我让你正确，这是一个升级版。现在它的工作原理与上面的Julian Hille相同。不确定Opera问题是否与从dom顶部找到css元素以切换内容有关，或者是否是相当不错的标准浏览器-与部分/错误浏览器的情况有关。我问了这个问题，这是我第一次用Jquery弄脏我的手，最初使用的是一些简单的香草JS，它切换divs没有问题，但正如你所说，依赖于：active类，让某些浏览器和用户不知道他们在哪里。已经说过，这里有一个关于使用e.style.display切换的JS方法

 $('#wrap').children('div').hide();

 <a class="linkme" name="c1">Link C1</a>

 $('.linkme').click(function() {
    var option = $(this).attr('name');
    showDiv(option);
 });

<div id="con1b">
    <a href="#c1" class="content-link">Link C1</a>
    <a href="#c2" class="content-link">Link C2</a>
    <a href="#c3" class="content-link">Link C3</a>
    <a href="#c4" class="content-link">Link C4</a>
    <a href="#c5" class="content-link">Link C5</a>
    <a href="#c6" class="content-link">Link C6</a>
</div>
<div id="wrap">
    <div id="c1" class="content-container">C1 Content</div>
    <div id="c2" class="content-container">C2 Content</div>
    <div id="c3" class="content-container">C3 Content</div>
    <div id="c4" class="content-container">C4 Content</div>
    <div id="c5" class="content-container">C5 Content</div>
    <div id="c6" class="content-container">C6 Content</div>
</div>

$(function(){
  $('a.content-link').click(function (e) {
     var $this = $(this),
         containerSelector = $this.attr('href'),
         $links = $('a.content-link');

     e.preventDefault();

     // hide all content containers other than our target
     $('div.content-container').not(containerSelector).hide();

     // show the target
     $(containerSelector).show();

     // set active classes
     $links.not($this).toggleClass('active', false);
     $this.toggleClass('active', true);

  });

  // this runs on initialization to show our "active" content based on the url:
  (function(){
     var option = '#c1',
         url = window.location.href;

      option = '#' + url.match(/option=(.*)/)[1];

      // just fake a click on the element so the event handler runs
      $('a[href='+option+']').click();
  })();
});