1

私はJavaScriptを初めて使用しますが、実際には今ではかなり必死です

次のようなHTMLファイルがあります。

  1. XMLファイルからデータを取得し、さまざまなdivに表示します（例）
  2. これらのdivは、クラス名（class ='box'）によって（デフォルトで）非表示になっています。
  3. リンクがクリックされたら、関数showContentに「href」を渡し、＃を削除してから、ドキュメント内でそのIDを持つ要素を探します。
  4. 次に、新しいクラス名（'show'）を追加します-この要素が表示されるようにします！

コードを実行すると、リンクをクリックするたびに新しいdivが表示されることがわかります...

だから現在の問題：

  1. すでに表示されているdivを新しいクリックIDに置き換えて、毎回1​​つのdivのみが表示されるようにします。
  2. すべてのタグにonClickイベントを挿入することを回避し、これをより自動化するにはどうすればよいですか？

私のコードは次のとおりです。

function showContent(obj)
{
var linkTo = obj.getAttribute("href");
var newlinkTo=linkTo.replace('#','');
//alert (newlinkTo);

document.getElementById(newlinkTo).innerHTML=" This is where the xml variable content should go";   
document.getElementById(newlinkTo).className += " Show";

return true;
}

<a href="#b0" onClick="return showContent(this);">
<div id="text_content"> link2 </div>
</a>

<a href="#b1" onClick="return showContent(this);">
<div id="text_content"> link 1 </div>
</a>

<div class='box' id='b0'> abstract content </div>
<div class='box' id='b1'> introduction content </div>
4

3 に答える 3

2

私は通常、どこでもjQueryを使用することに興味はありませんが、それを使用すると次のことができます。

<a class='showContent' data='b0'/>

あなたのjs：

var selected;

$('a.showContent').on('click',function(e){
     var toShow = $(this).attr('data');
     if(selected!==undefined) selected.removeClass('Show');
     selected = $(div+'#'+toShow);
     selected.addClass('Show');
 });

これがあなたの望むものかどうかはわかりませんが、私はそれを提案したいと思いました.

于 2012-06-26T16:39:04.460 に答える
1

これを行うための WAY クリーンな方法があります。

これは私の簡単な例にすぎません。これよりもきれいになる可能性がありますが、これはあなたのケースで機能します:

HTML:

<a href="#b0" id="b0-link" class="link" rel="b0">link b0</a>

<a href="#b1" id="b1-link" class="link" rel="b1">link b1</a>

<div class='box' id='b0'> abstract content </div>
<div class='box' id='b1'> introduction content </div>​​​​​​​​​

CSS:

#b0 { display: none; }

#b1 { display: none; }

a, div.text_content { display: inline; padding: 0 10px; }

Jクエリ:

​$('.link').click(function(){
    var id = $(this).attr("rel");

    $('#'+id).slideToggle('slow');                      
});

各リンクには、表示しようとしている div 要素の ID と同じ REL 属性が必要です。

実際のこの例の JSFiddle を次に示します。

http://jsfiddle.net/CUJSM/5/

于 2012-06-26T17:23:56.800 に答える
1

この種のことは、jQuery なしで行うのは難しくありません。

Javascript でアクティブ化されたリンクにハッシュバン (#!) を使用して、ハッシュを使用した他の可能性のあるリンクと区別することをお勧めします。（スクリプトは一番下にあります）

<div id="nav-links">

    <a href="#!b0">
    <div id="text_content"> link2 </div>
    </a>

    <a href="#!b1">
    <div id="text_content"> link 1 </div>
    </a>

</div>

<div class='box' id='b0'> abstract content </div>
<div class='box' id='b1'> introduction content </div>

<script type="text/javascript">

    var links = document.getElementById('nav-links').getElementsByTagName('a');
    for(var i = 0, link; link = links[i]; i++) {
        link.onclick = showContent;
        // Hide content divs by default
        getContentDiv(link).style.display = 'none';
    }
    // Show the first content div
    if(links.length > 0) showContent.apply(links[0]);

    var current;

    function showContent() {

        // hide old content
        if(current) current.style.display = 'none';

        current = getContentDiv(this);
        if(!current) return true;

        //current.innerHTML = "This is where the xml variable content should go";
        current.style.display = 'block';

        return true;

    }

    function getContentDiv(link) {

        var linkTo = link.getAttribute('href');

        // Make sure the link is meant to go to a div
        if(linkTo.substring(0, 2) != '#!') return;
        linkTo = linkTo.substring(2);

        return document.getElementById(linkTo);

    }

</script>​
于 2012-06-26T16:48:54.583 に答える