2016-05-24 10 views
-2

私はhtmlの初心者です。私はあなたのサポートが必要です。私のコードを見てください:more/less with FAQ with

https://fiddle.jshell.net/ghLoau6r/1/

は今、私はテーブルとしてよくある質問のリストを作りたいです。要件は次のとおりです。

  • 我々は任意のリンクボタン(ここでは、表の2行として2リンクボタンがあります)をクリックすると、背景が(もうピンクではないが、別の色)を変更する必要があります
  • ときいずれかのリンクボタンをクリックすると、行の先頭にある三角形も別のフォームに変わります(すでに作成済みですがコードは実行されません)
  • 「show info 2」をクリックすると、 「コンテンツ1」の代わりに表示されます。

大変ありがとうございます。

+7

'<スクリプトスタイル=「テキスト/ cssの」>' - 私はあなたのコードの最初の行としてこれを見ました。私はあなたが何をしているのかわからないと思っています。助けてくれるのは非常に難しいです... –

+1

前の良い答えを受け入れていないし、単一のupvoteをキャストしていません。 – sweaver2112

+0

これらの例をここから試してみてください。http://www.w3schools.com/howto/howto_js_accordion.asp –

答えて

1

だから無礼ではありませんが、だからここに固定する必要があることはたくさんあります。あなたにそれらをすべて共有する時間はありません。私は本を​​拾うことを強くお勧めします(HeadFirst HTML & CSSは悪くない、他にもたくさんあります)。

あなたの特定の質問に対する中核的な問題は、最初に、IDは一意でなければならないということです(IDは「content1」のIDを持つ2つの要素があります)。第2に、コンテンツ2が必要な場合でも、2番目のリンクはcontent1を探しています。クイックフィックスは、2番目のコンテンツ領域のIDを更新し、アンカーonclickハンドラを更新して正しいIDを検索することです。

これは理想的なソリューションかスケーラブルなソリューションからかなり離れているので、お読みください。

0

コメントしたように、あなたのために完全に書かなければ助けが難しいと思います。しかし、JavaScriptをインライン/ HTMLから別のJSファイルに移動する必要があることを少なくとも指摘したいと思います。

onclick="document.getElementById('content1').style.display=(document.getElementById('content1').style.display=='none')?'block':'none'" 

をそして$(document).ready()関数の内部で、JSフィドルの "JavaScriptの" セクションにそれを置く:あなたのJSフィドルで

、これを取ります。 jQueryを使用して、必要な動作にonclickイベントを登録します。 jQueryのURIを使用して、フィドルでのjQueryを含めることができるようなhttps://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js

Godpseeed

+0

あなたはjQueryでも彼を指差すと本当に思っていましたが、彼はもっと彼を追加することなく学ぶだけで十分だと思いました。 :Pそして私は良いフレームワークが出てくる前にJSで始まったので、バニラを弾きたい人のために私の心の中に柔らかい場所を持っています。 – Paul

+1

@Paul - 私はそれを聞いています。しかし、jQueryが私に何をしているのかを完全に理解していないときでも、初心者が作業を始めようとしているので、シンプルさと使い易さの良さを実感しました。 – mmcrae