Создание отображения абзаца при нажатии на ссылку с помощью CSS или JS

Question

Я пытаюсь создать подразделение, которое содержит список функций и обновлений в левой части моей страницы, и поле, которое содержит описания этих функций на в правой части моей страницы. В основном я пытаюсь сделать так, что когда я нажимаю (или наводил) на одну из функций - текст в поле будет меняться в абзаце об этой конкретной функции.

Я не знаю, лучше ли пытаться использовать javascript, чтобы изменить классы всех описаний на «display: none», за исключением тех, на которые был нажат. Или, может быть, есть простой способ сделать это, просто добавив теги ссылок и классы ко всем моим элементам списка и используя CSS?

Вот мои W3schools http://www.w3schools.com/code/tryit.asp?filename=FAXQLP79PMJX - Я в основном пытаюсь сделать так, что, когда я нажму на элемент «Мониторинг в реальном времени, в процессе», появится текст, который в настоящее время находится в сером поле. Но если я нажму на другой элемент, этот текст исчезнет, ​​и появится новое описание.

Я пробовал искать другие подобные вопросы здесь, но все они работают, когда элемент наведения/кликабель является родителем элемента, который вы хотите отобразить, - что здесь не так. Благодаря

EDIT: Вот короткая версия списка с последующим разделением, в котором я хотел бы текст появляться

<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>