Question

我在隐藏中遇到问题并显示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>

Fiddle

Answer 1

如果我理解你的问题， event.preventDefault（）;不适用于所有浏览器，所以如果您使用其他浏览器，如IE 然后使用event.returnValue = false;而不是那个。所以你可以使用javascript检测你的浏览器

var appname = window.navigator.appName;

Answer 2

这是我目前在我的项目中使用“禁用”锚标记

禁用锚点：

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

Answer 3

使用if语句检查click函数内部的代码，检查变量是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; }

Answer 4

在展开元素时向您的包装元素添加一个名为'shown'的类，并在隐藏它时将其删除。使用.hasClass('shown')确保永远不会执行不适当的条件。

想要制作非活动超链接

4 个答案: