0

我正在尝试使用活动链接从 URL 参数进行 div 切换。六个<div>s，六个环节；可以更多，也可以更少。

我希望使用活动链接开关加载 URL 参数，例如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 加载正确的内容为活动的（红色）。

4

2 回答 2

0

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

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

这在 Opera 中不起作用，您想将我通过 url 参数 option=* 选择的链接标记为活动？

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

  1. 给你的链接一个 id 并设置为活动的。

    链接 C1 函数 showDiv(option) { $('#' + option).show(); $('#l' + 选项).addClass('active'); }

  2. 只是一个增强：

    链接 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 的代码。

于 2013-02-27T22:02:55.377 回答
0

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

首先删除 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>

和 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();
  })();
});
于 2013-02-27T22:24:51.507 回答