2013-03-26 90 views
0

我有问题隐藏并显示div元素。 在这种情况下,当用户点击显示尊重内容的年份时。 问题我想要在打开时分别关闭hyperling。 脚本和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> 

Fiddle

回答

0

如果我理解你的问题, event.preventDefault();不适用于所有浏览器,所以如果您使用其他浏览器,如IE ,则使用event.returnValue = false;而不是that.so你可以检测到您的浏览器使用JavaScript为

var appname = window.navigator.appName;

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

原代码,可以发现here

0

环绕声编码的点击功能的内部与if语句中检查,看是否有变化是真还是假。如果它是错误的,它将不会运行代码,这意味着链接实际上处于非活动状态。试试这个..

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

添加一个名为类“显示”,以你的包装元素扩展你的元素时,并将其隐藏时将其删除。使用.hasClass('shown')确保不合适的条件从不执行。