0

a href 属性を使用して javascript と html のタブを定義する代わりに、li タグを使用する方法を誰か教えてもらえますか?

どんな助けでもいただければ幸いです

<!doctype html> <html lang="en">
<head>  
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />  
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>  
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>  
<link rel="stylesheet" href="/resources/demos/style.css" />  
<script>  
$(function() {    
$( "#tabs" ).tabs();  
});  
</script>
</head>
<body> 


<div id="tabs">
  <ul>
  <li><a href="#tabs-1">Nunc tincidunt</a></li>   
  <li><a href="#tabs-2">Proin dolor</a></li>    
  <li><a href="#tabs-3">Aenean lacinia</a></li>  
  </ul>  
  <div id="tabs-1">    
  <p> hendrerit.</p>  
  </div>
    <div id="tabs-2">    
  <p> hendrerit.</p>  
  </div>
    <div id="tabs-3">    
  <p> hendrerit.</p>  
  </div>
  </div></div>  
  </body></html>
4

3 に答える 3

0

リスト項目からタグを削除する方法を尋ねていると思いますか? なぜあなたがそれをしたいのかわかりません。これが、ナビゲーション メニューの大部分を実装する方法です。

しかし、それでもやりたい場合は、もちろん複数の方法があります。どれが一番いいのかわからない。私はそれを提案し、それが間違っている場合はコミュニティに押しつぶしてもらいます。:)

あなたはこれを行うことができます：

<div id="tabs">
<ul>
    <li goto="tabs-1">Nunc tincidunt</li>
</ul>
</div>

jquery を使用して、タブのクリックを処理します。

$().ready({
    $('#tabs li').click(function() {
        var goto_id = $(this).attr('goto');
        var goto = $('#' + goto_id);
        $(window).scrollTop(goto.offset().top - $(window).offset().top + $(window).scrollTop());
    });
});

ただし、これらすべてがタグに組み込まれていることを考えると、やり過ぎのように思えます。

于 2013-05-07T14:16:58.047 に答える
0

これは、私がそれを正しく理解していれば：

<!doctype html> <html lang="en">
<head>  
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />  
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>  
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>  
<link rel="stylesheet" href="/resources/demos/style.css" />  
<script>  
$(function() {    
$( "#tabs" ).tabs();  
});  
</script>
</head>
<body> 


<div id="tabs">
  <ul>
  <li onclick="location.href='#tabs-1';"><a href="#">Nunc tincidunt</a></li>   
  <li onclick="location.href='#tabs-2';"><a href="#">Proin dolor</a></li>    
  <li onclick="location.href='#tabs-3';"><a href="#">Aenean lacinia</a></li>  
  </ul>  
  <div id="tabs-1">    
  <p> hendrerit.</p>  
  </div>
    <div id="tabs-2">    
  <p> hendrerit.</p>  
  </div>
    <div id="tabs-3">    
  <p> hendrerit.</p>  
  </div>
  </div></div>  
  </body></html>
于 2013-05-07T14:11:24.623 に答える