Сообщение от Царь Леонид
|
Я бы так наверное сделал
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="demo_container">
<div id='cssmenu'>
<ul>
<li><a href='index.html'><span>Главная</span></a>
<hr>
<li class='has-sub'><a href='#'><span data-id='m1'>menu1</span></a>
<ul>
<li class='active'><a href='menu1.html'><span>submenu1</span></a></li>
<li class='active'><a href='menu2.html'><span data-id='m2'>submenu2</span></a></li>
</ul>
<li><a href='menu2.html'><span>menu2</span></a></li>
<li><a href='menu3.html'><span>menu3</span></a></li>
</ul>
</div>
<div id="data"></div>
<script>
var data = {
m1: {
text: 'Много текста по этому пункту'
},
m2: {
text: 'много текста по другому пункту'
}
};
var menu = document.getElementById('cssmenu')
var container = document.getElementById('data')
menu.addEventListener('click', function(e){
e.preventDefault();
if(e.target.dataset.id){container.innerHTML = data[e.target.dataset.id].text;}
})
</script>
</div>
</body>
</html>
|
Спасибо большое, а не подскажешь как приминить стили(теги хотя бы) к этому "text" и как добавить картинки, т.е. тег img?