CSSまたはJSのいずれかのリンクをクリックしたときに段落を表示する

Question

マイページの左側にある機能とアップグレードのリストと、これらの機能の説明が記載されたボックスを作成しようとしています私のページの右側。基本的には、機能の1つをクリック（またはホバー）すると、ボックス内のテキストがその特定の機能に関する段落に変更されるようにしています。

javascriptを使用して、すべての説明のクラスをクリックしたものを除いて 'display：none'に変更することをお勧めしますか。それとも、リンクタグとクラスをすべてリストアイテムに追加してCSSを使用するだけで簡単に行うことができますか？

ここに私のW3schoolsがあります。http://www.w3schools.com/code/tryit.asp?filename=FAXQLP79PMJX - 私は基本的に、「リアルタイムモニタリング中」という項目をクリックすると、現在灰色のボックスに表示されているテキストが表示されるようにしています。しかし、別のアイテムをクリックすると、そのテキストは消え、新しい説明が表示されます。

ここで他の同様の質問を見てみましたが、ホバー/クリック可能なアイテムが表示したいアイテムの親である場合は動作しています。おかげ

編集：ここで私は

<div> 
       <p>Standard Features</p> 
       <ul> 
       <li>Real time monitoring, in process</li> 
       <li>High speed, 1st order analysis</li> 
       <li>Robust design</li> 
       <li>Non-intrusive (Excludes B-Series)</li> 
       <li>Withstand corrosive environments</li> 
       <li>National Instruments Labview platform</li> 
       </ul> 
</div> 
       <p class="ms_item_header">Click on a feature to learn more</p> 
       <p class = "ms_item_001">Display this when they click on the first feature</p> 
       <p class = "ms_item_002">Display this instead when they click on the second feature</p> 
<div> 
</div> 

Answer 1

を表示するテキストを希望する部門に続いて、リストの短いバージョンがあるが

$(document).ready(function(){ 
 
$('.clickButtons').click(function() { 
 
    $("p.textC").attr('style','display:none;') 
 
    var index = $("li").index(this); $("p.textC").eq(index).attr('style','display:block;') 
 

 
}); 
 
});

p#blueOne{ 
 
    color:blue; 
 
} 
 
p#redOne{ 
 
    color:red; 
 
    display:none;; 
 
} 
 
.textC{ 
 
    top:5px; 
 
} 
 
.clickButtons{ 
 
    cursor:pointer; 
 
} 
 
.textCon{ 
 
    position:relative; 
 
    border:1px solid black; 
 
    height:100px; 
 
    padding:0 10px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <ul> 
 
    <li class="clickButtons">Item 1</li> 
 
    <li class="clickButtons">Item 2</li> 
 
    </ul> 
 
    <div class="textCon"> 
 
    <p id="blueOne" class="textC">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed</p> 
 
    <p id="redOne" class="textC">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make.</p> 
 
    </div> 
 
    </div>