0

アクティブなリンクを使用して URL パラメータから div スイッチを実行しようとしています。6<div>秒、6 リンク。多いかもしれませんし、少ないかもしれません。

アクティブなリンク スイッチを使用して 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

これはあなたが探しているものですか：http：//jsfiddle.net/hK26Z/2/

まず、名前属性を不要なものとして削除します。代わりに、コンテンツの非表示/表示を制御するすべてのリンクに適用されるクラスを使用します。また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 に答える
0

これまでのところ、私があなたを正しければ、2つの問題があります：

$('#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 function 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（バグ）の問題のようです。エラーコンソールは、それはあなたのコードではなく、jquery のコードであると私に伝えました。

于 2013-02-27T22:02:55.377 に答える