Question

我正在尝试使用活动链接从URL参数进行div切换。六个<div>个，六个链接;可能会更多，可能更少。

我希望网址参数加载活动链接切换，例如page.html?option=c2。
目前，使用URL参数加载正确的内容但没有活动链接，此后onclick处于活动状态。

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;
    }); 
});

CSS就是这个

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

HTML就是这个

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

<div id="wrap">
    <div id="c1">C1 Content</div>
    <div id="c2">C2 Content</div>
    <div id="c3">C3 Content</div>
    <div id="c4">C4 Content</div>
    <div id="c5">C5 Content</div>
    <div id="c6">C6 Content</div>
</div>

示例 http://www.zest.ch/csi/2013/page.html?option=c2 为div添加正确的内容，而不将链接作为活动（红色）。

Answer 1

到目前为止，如果我找到你，你有两个问题：

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

这在Opera中不起作用，你想把链接标记为有效，我通过url参数选项选择= *？

1

<div id="wrap">
    <div id="c1" class="con">C1 Content</div>
    <div id="c2" class="con">C2 Content</div>
    <div id="c3" class="con">C3 Content</div>
    <div id="c4" class="con">C4 Content</div>
    <div id="c5" class="con">C5 Content</div>
    <div id="c6" class="con">C6 Content</div>
</div>

$('#wrap div.con').hide()

会做的。你也可以选择

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

为您的链接指定ID并设置为活动状态。

链接C1 function showDiv（option）{ $（'＃'+选项）.show（）; $（'＃l'+选项）.addClass（'active'）; }
只是一个增强功能：

Link C1

应替换为：

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

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

它不完美，但我希望你明白我的意思

另一个编辑：很抱歉，但是你不能在Opera 10.10中使用它，我刚刚安装并检查了它。这似乎是一个jquery（bug）问题。错误控制台告诉我，这不是你的代码，而是来自jquery的那个。

Answer 2

这是你在找什么：http://jsfiddle.net/hK26Z/2/

首先删除name属性作为其不必要的内容，而不仅仅是我们一个适用于您想要控制内容hide / show的所有链接的类。同时更改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>

和JS：

$(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();
  })();
});

DIV切换带有活动链接和URL参数

2 个答案: