0

div 要素の非表示と表示に問題があります。このシナリオでは、ユーザーが年をクリックすると、敬意の内容が表示されます。 問題開いた年ごとにハイパーリングを非アクティブにしたい。このためのスクリプトとhtmlを以下に示します.preventDefault（）を試しました。しかし、成功していません。

  <script type="text/javascript" >
          $(document).ready(function() {
             $("div.new:gt(0)").hide();// to hide all div except for the first one
             $("div[name=arrow]:eq(0)").hide();
             // $("div.nhide:gt(0)").hide(); 
              // $("a[name=new]").hide();
             $("a[name=new]").hide();
             $('#content a').click(function(selected) {

                var getID = $(this).attr("id"); 
                var value=  $(this).html(); 

                if( value == '&lt;&lt; Hide')
                {
                    // $("#" + getID + "arrow").hide();
                    $("a[name=new]").hide();
                    $("#" + getID + "_info" ).slideUp('slow');
                    $("div[name=arrow]").show();
                    $("div.new").hide(); 
                    $(this).hide();
                    // var getOldId=getID;
                    // $("#" + getID ).html('&lt;&lt; Hide').hide(); 
                }
                if($("a[name=show]"))  
                {
                    // $("div.new:eq(0)").slideUp()
                    $("div.new").hide(); 
                    $("div[name=arrow]").show();
                    $("a[name=new]").hide();
                    $("#news" + getID + "arrow").hide();
                    $("#news" + getID + "_info" ).slideDown();

                    $("#news" + getID ).html('&lt;&lt; Hide').slideDown(); 
                } 

            });  
        });  
          </script>

htmlコードは以下です

 <div id="content">
<div class="news_year">
 <a href="#" name="show"  id="2012">
   <div style="float:left;" name="year" id="news2012year">**2012** </div>
   <div style="float:left;" name="arrow" id="news2012arrow">&gt;&gt;</div>
 </a>
    </div> 

 <div class="new" id="news2012_info">
   <div class="news">
      <div class="news_left">News for 2012</div>
   </div>
    <div class="nhide" ><a href="#" class="new" name="new" id="news2012">&lt;&lt; Hide</a>  </div>
  </div>
<div id="content">
<div class="news_year">
 <a href="#" name="show"  id="2011">
   <div style="float:left;" name="year" id="news2012year">2012 </div>
   <div style="float:left;" name="arrow" id="news2012arrow">&gt;&gt;</div>
 </a>
    </div> 

 <div class="new" id="news2011_info">
   <div class="news">
      <div class="news_left">News for 2011</div>
   </div>
    <div class="nhide" ><a href="#" class="new" name="new" id="news2011">&lt;&lt; Hide</a>  </div>
  </div>

フィドル

4

4 に答える 4

0

問題を理解している場合は、 event.preventDefault(); すべてのブラウザで機能するとは限らないため、IE などの他のブラウザを使用している場合は、event.returnValue = false; を使用してください。その代わりに、JavaScriptを使用してブラウザを検出できます

var appname = window.navigator.appName;

于 2013-03-26T06:21:04.740 に答える
0

これは、アンカータグを「無効にする」ためにプロジェクトで現在使用しているものです

アンカーを無効にする:

  • href属性を削除
  • 不透明度を変更して効果を追加
<script>
$(document).ready(function(){
            $("a").click(function () { 
                $(this).fadeTo("fast", .5).removeAttr("href"); 
            });
        });
</script>

アンカーを有効にする:

$(document).ready(function(){
    $("a").click(function () { 
        $(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html"); 
    });
});

元のコードはここにあります

于 2013-03-26T06:21:19.440 に答える
0

クリック関数内のコードをifステートメント チェックで囲み、変数が true か false かを確認します。false の場合、コードは実行されません。つまり、リンクは実質的に非アクティブです。これを試して..

var isActive = true;
if (isActive) {
    // Your code here
}
// The place where you want to de-activate the link
isActive = false;

リンクの色を灰色に変更して、非アクティブであることを示すことも検討できます。

編集
複数のリンクを無効にしたいことに気付きました..上記のコードはそれらすべてを無効にします。以下のコードを試してください（ifクリック機能でコードを囲みます）

if(!$(this).hasClass("disabled")) {
    // Your code here
}

// The place where you want to de-activate the link
$("#linkid").addClass("disabled");

// To re-enable a link
$("#linkid").removeClass("disabled");

// You can even toggle the link from disabled and non-disabled!
$("#linkid").toggleClass("disabled");

次に、CSS で次のような宣言を行うことができます。

.disabled:link {
    color:#999;
}
于 2013-03-26T06:22:23.327 に答える
0

要素を展開するときに「shown」というクラスをラッパー要素に追加し、非表示にするときに削除します。.hasClass('shown')不適切な条件が実行されないようにするために使用します。

于 2013-03-26T06:24:34.617 に答える