javascript - 想要制作非活动超链接

Question

我在隐藏和显示 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>

小提琴

Answer 1

如果我理解你的问题，event.preventDefault(); 不适用于所有浏览器，因此如果您使用其他浏览器（如 IE），请使用 event.returnValue = false; 而不是 that.so 您可以使用 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"); 
    });
});

原始代码可以在这里找到

Answer 3

在 click 函数内的代码周围加上一条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;
}

Answer 4

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