0

私は比較的単純に見えることをやろうとしていると思います。CSS 定義のメニュー項目リストを使用する Web ページがあります。メニュー項目の 1 つをクリックすると、ページの途中 (独自の div コンテナー内) のコンテンツを変更したいと思います。別のメニューをクリックしたら、また内容が変わってほしい。ページの中央にあるコンテンツ領域は独自の div にあるため、ボタンをクリックすると、ある項目を別の項目に置き換えるコードを探しているだけだと思います。JQuery の replaceWith を見てきましたが、この状況でその関数がどのように機能するのかわかりません。つまり、私が読んだところ、メニュー項目がクリックされたときの条件が含まれていません。CSS スタイルと z-index も読みましたが、うまくいくものを見つけることができないようです。

それで、私の質問は、メニューボタン項目がクリックされたときに、独自の div コンテナー内のコンテンツ (この状況では .gif) を別の .gif に変更するにはどうすればよいですか?

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

<div id="nav_container">
   <ul id="nav">
     <li class="first active"><a href="/" class="index.ph">Home</a></li>
     <li><a href="JPLCSubpages/aboutcoaching/about.html" class="about-coaching">About</a>
       <ul class="about-coaching">
     <li><div class="wicoaching"><a href="index.php" style="border-top:0px">What is Coaching?</a> 
      </div></li>
     <li><div class="wdinacoach"><a href="why-do-i-need-a-coach.php">Why Do I Need a Coach?</a></li>
     <li><div class="coachingtherapy"><a href="isnt-coaching-just-therapy.php">Isn't Coaching Just Therapy?</a></li>
     <li><div class="myphilosophy"><a href="my-coaching-philosophy.php">My Coaching Philosophy</a>
        </li>
      </ul>
    </li>

<li><a href="../coachingservices/services.html" class="services">Services</a>
 <ul class="services">
  <li><a href="../coachingservices/life-coaching.php" style="border-top:0px">Life Coaching</a></li>
  <li><a href="../coachingservices/professional-executive-coaching.php">Professional & Executive Coaching</a></li>
  <li><a href="../coachingservices/group-team-coaching.php">Group & Team Coaching</a>  
  </li>
  <li><a href="../coachingservices/sports-performance-coaching.php">Sports Performance Coaching</a></li>
    </ul>
</li>

      <li><a href="../coachingseminars/seminars.html" class="seminars">Seminars</a></li>
      <li><a href="../coachingcontact/contact.html" class="contact">Contact</a></li>
    </ul>


<div id="content_home">

<div style="text-align: left;" class="textbox"><img width="722" height="518" src="../../Images/AboutCoaching Images/AboutMe.gif" alt="" /></div>

たとえば、誰かが「コーチングとは？」をクリックすると、メニュー項目で、「テキストボックス」の画像を変更したいです。ある場合、画像「Aboutme.gif」を別の画像にしたいと思います。どうすればこれを達成できますか? Javascript、JQuery、または CSS を使用することにオープンです。

よろしくお願いします。

4

1 に答える 1

0

これは非常に単純な作業であり、重複している可能性があり、解決策はインターネット上で簡単に見つかりますが、私の回答を読んで、さらに指示が必要な場合はお知らせください。

JavaScript イベントと関数の使用:

 <li>
   <div class="wicoaching">
   <a href="index.php" style="border-top:0px" onclick="ChangeImage();">
   What is Coaching?</a> 
   </div>
 </li>

これは、誰かが「コーチングとは?」をクリックするたびに、ChangeImage という関数が実行されます。

ここで、関数を宣言する必要があります。

<script>
 function ChangeImage{  
       var thePic = document.getElementById('MyImage');
       // Note you need to add a name or image to your img tag.
       thePic.src = "SomeOtherImage.gif"; 
             }
</script>

代わりに画像を削除して別の画像を追加する場合:

var imageToBeRemoved = document.getElementById('MyImage');
var Parent = imageToBeRemoved.parentNode;
Parent.removeChild(imageToBeRemoved);

これで、DOM から削除されました。画像ソースを変更する代わりに、ChangeImage 関数内に入ります。

別の Source で別のものを追加する場合: 

var newImage = document.createElement("img");
NewImage.src = 'MyNewImage.jpg';
Parent.appendChild("newImage"); // alternatively, you can reference to parent by its ID or Name using getElementById or a similar method.
于 2013-02-07T06:17:14.637 に答える