在IE下实现了点击"链接一"进入第一个选项卡，点击"链接二"进入第二个选项卡,但在firefox下失效,怎么改？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>tabs</title>
<link
  href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/flick/jquery-ui.css"
  rel="stylesheet" type="text/css"></link><script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script><script
  src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"
  type="text/javascript">
</script><SCRIPT>
  $(function() {
    $("#tabs").tabs();    
  });
  
  function on_trenda(key) {
    var lnk
    if (key==1){
      lnk = document.getElementById("autoclick1");
    }else if (key==2) {
      lnk = document.getElementById("autoclick2");
    }
    lnk.click();
  }
</SCRIPT> 
</head><body>
<DIV class=demo>
     <a href="#"  onClick="on_trenda(1)">链接一</a><br />
    <a href="#"  onClick="on_trenda(2)"> 链接二</a><br />
  <DIV id=tabs>
    <UL>
      <LI><A id="autoclick1" href="#tabs-1">Nunc tincidunt</A> </LI>
      <LI><A id="autoclick2" href="#tabs-2">Proin dolor</A> </LI>
    </UL>
    <DIV id=tabs-1>
      <P>Proin elit arcu, rutrum commodo.</P></DIV>
    <DIV id=tabs-2>
      <P>Morbi tincidunt, dui sit amet facilisis feugiat.</P></DIV>
  </DIV>
</DIV>
</body>
</html>

解决方案 »

  1.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>tabs</title>
    <link
      href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/flick/jquery-ui.css"
      rel="stylesheet" type="text/css"></link><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script><script
      src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"
      type="text/javascript">
    </script><script type="text/javascript">
      $(function() {
       $("#tabs").tabs();
    $(".demo>a").click(function(){
    alert($(this).index());
    if($(this).index()==0){
    $( "#tabs" ).tabs( "option", "selected", 0 );
    }else{
    $( "#tabs" ).tabs( "option", "selected", 1 );
    }
    });
      
      });
       
    </script>  
    </head><body>
    <div class='demo'>
      <a href="#">链接一</a><br />
      <a href="#"> 链接二</a><br />
      <div id='tabs'>
      <ul>
      <li><A id="autoclick1" href="#tabs-1">Nunc tincidunt</A> </li>
      <li><A id="autoclick2" href="#tabs-2">Proin dolor</A> </li>
      </ul>
      <div id=tabs-1>
      <p>Proin elit arcu, rutrum commodo.</p></div>
      <div id=tabs-2>
      <p>Morbi tincidunt, dui sit amet facilisis feugiat.</p></div>
      </div>
    </div>
    </body>
    </html>已经帮你改好了
    总结一下你的代码：       1、用了jQuery就别在出现document.getElementById("XXX"),不然就失去了jQuery的意义了       2、你可能还没看过关于DOM的文档，不然也不会出现lnk.click()这样的语句       3、html尽量符合w3c标准，标签尽量小写，如果要大写就全部大写