#php #jquery
#php #jquery
Вопрос:
У меня есть левое меню, показывающее элементы и содержимое вкладок в правом меню.
Когда я нажимаю на Wingardium или его дочерние узлы (leftmenu), содержимое должно отображаться внутри вкладки wingardium в правом меню .. аналогично
Когда я нажимаю на потоки данных или их дочерние узлы (leftmenu), содержимое должно отображаться на вкладке Потоки данных в правом меню .. аналогично
Но в моем коде содержимое отображается только внутри вкладки wingardium, а не на другой вкладке в правом меню. Вот мой код.
<html>
<head>
<script src="js/jqueryv1.10.2.js"></script>
<script>
//--LEFT MENU SCRIPT--//
$ (document).ready(function()
{
$ (".wings").click(function(event)
{
$(".box").slideUp("slow");
if ($(this).next().is(":hidden") == true)
{
$(this).next().slideDown("slow");
}
});
//(".box").hide("slow");
});
//--RIGHT_MENU TAB SCRIPT----//
$ (document).ready(function()
{
$('#tabs li a:not(:first)').addClass('inactive');
$('.container').hide();
$('.container:first').show();
$('#tabs li a').click(function()
{
var t = $(this).attr('id');
if($(this).hasClass('inactive'))
{ //this is the start of our condition
$('#tabs li a').addClass('inactive');
$(this).removeClass('inactive');
$('.container').hide();
$('#' t 'C').fadeIn('slow');
}
});
});
</script>
<style>
ol#menu { margin:0px 10px; padding:0; text-align:left; }
ol#menu li { position:relative; list-style-type:none; border-bottom:1px solid #efefef; padding:7px 0;}
ol#menu .current { border-bottom:4px solid #3d496a;}
ol#menu li:hover { border-bottom:4px solid #3d496a;}
ol#menu li a { padding:0px 0px; text-decoration:none; color:#68759c;}
ol#menu li a:hover { color:#8895b8; border:none; }
.wings { width:200px; float:left; padding:0px 0px; }
.box { width:195px; /* display:none;*/ margin:14px 0px; }
#tabs { width:100%; height:30px; border-bottom:solid 1px #CCC; padding-right:2px; margin-top:10px; }
#tabs li { float:left; list-style:none; border-top:1px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #ccc; margin-right:5px;
border-top-left-radius:3px; border-top-right-radius:3px; outline:none; }
#tabs li a { font-family:calibri; font-size:15px; color:#5685bc; padding-top:5px; padding-left:7px; padding-right:7px; padding-bottom:8px;
display:block;
background: #FFF; border-top-left-radius:3px; border-top-right-radius:3px; text-decoration:none; outline:none; }
#tabs li a.inactive { padding-top:3px; padding-bottom:8px; padding-left:8px; padding-right:8px; color:#666666; background:#EEE; outline:none;
border-bottom:solid 1px #CCC; }
#tabs li a:hover, #tabs li a.inactive:hover { color:#5685bc; outline:none; }
.container { clear:both; width:99%; border:0px solid #CCC; padding-top:2px; margin:0 auto; }
.container ul { margin-left:25px; font-size:small; line-height:1.4; list-style-type:disc; }
.container li { padding-bottom:5px; margin-left:5px;}
</style>
</head>
<body>
<div style="float:left;width:200px;border:1px solid lightgray;margin:0px 23px;"><!--leftmenu-->
<ol id="menu">
<li>
<a href="home.php#" id="ds1">Wingardium</a>
<img class="wings" src="images/downarrow.png" style="width:17px;height:17px;cursor:pointer;float:right;"/>
<div class="box" style="margin:6px 0px;">
<a href="#">Wingardium1</a><br>
<a href="#">Wingardium2</a>
</div>
</li>
<li>
<a href="home.php#" id="ds2">Data streams</a>
<img class="wings" src="images/downarrow.png" style="width:17px;height:17px;cursor:pointer;float:right;"/>
<div class="box" style="margin:6px 0px;">
<a href="#">Stream1</a><br>
<a href="#">Stream2</a>
</div>
</li>
</ol>
</div>
<div style="float:left;width:800px;border:1px solid lightgray;margin:0px 23px;"><!--rightmenu-->
<ul id="tabs">
<li><a id="tab1">Wingardium</a></li>
<li><a id="tab2">Data streams </a></li>
</ul>
<div class="container" id="tab1C">Wingardium content</div>
<div class="container" id="tab2C">Data streams content</div>
</div>
</body>
</html>
ОБНОВЛЕННЫЙ КОД
Здесь у меня есть ссылки, приведенные для дочерних узлов в левом меню. Теперь, когда я нажимаю на дочерние узлы, должно отображаться другое эхо-сообщение, но этого не произошло
<html>
<head>
<script src="js/jqueryv1.10.2.js"></script>
<script>
$ (document).ready(function()
{
$ (".wings").click(function(event)
{
$(".box").slideUp("slow");
if ($(this).next().is(":hidden") == true)
{
$(this).next().slideDown("slow");
}
return false;
});
$('#menu li').click(function(e){
e.preventDefault();
ind = $(this).index()
if(ind == 0)
$('#tabs li:first').click()
else
$('#tabs li:eq(1)').click();
return false;
})
//(".box").hide("slow");
});
//--RIGHT_MENU TAB SCRIPT----//
$ (document).ready(function()
{
$('#tabs li a:not(:first)').addClass('inactive');
$('.container').hide();
$('.container:first').show();
$('#tabs li').click(function()
{
var t = $('a',this).attr('id');
if($('a',this).hasClass('inactive'))
{ //this is the start of our condition
$('#tabs li a').addClass('inactive');
$('a',this).removeClass('inactive');
$('.container').hide();
$('#' t 'C').fadeIn('slow');
}
return false;
});
});
</script>
<style>
ol#menu { margin:0px 10px; padding:0; text-align:left; }
ol#menu li { position:relative; list-style-type:none; border-bottom:1px solid #efefef; padding:7px 0;}
ol#menu .current { border-bottom:4px solid #3d496a;}
ol#menu li:hover { border-bottom:4px solid #3d496a;}
ol#menu li a { padding:0px 0px; text-decoration:none; color:#68759c;}
ol#menu li a:hover { color:#8895b8; border:none; }
.wings { width:200px; float:left; padding:0px 0px; }
.box { width:195px; /* display:none;*/ margin:14px 0px; }
#tabs { width:100%; height:30px; border-bottom:solid 1px #CCC; padding-right:2px; margin-top:10px; }
#tabs li { float:left; list-style:none; border-top:1px solid #ccc; border-left:1px solid #ccc; border-right:1px solid #ccc; margin-right:5px;
border-top-left-radius:3px; border-top-right-radius:3px; outline:none; }
#tabs li a { font-family:calibri; font-size:15px; color:#5685bc; padding-top:5px; padding-left:7px; padding-right:7px; padding-bottom:8px;
display:block;
background: #FFF; border-top-left-radius:3px; border-top-right-radius:3px; text-decoration:none; outline:none; }
#tabs li a.inactive { padding-top:3px; padding-bottom:8px; padding-left:8px; padding-right:8px; color:#666666; background:#EEE; outline:none;
border-bottom:solid 1px #CCC; }
#tabs li a:hover, #tabs li a.inactive:hover { color:#5685bc; outline:none; }
.container { clear:both; width:99%; border:0px solid #CCC; padding-top:2px; margin:0 auto; }
.container ul { margin-left:25px; font-size:small; line-height:1.4; list-style-type:disc; }
.container li { padding-bottom:5px; margin-left:5px;}
</style>
</head>
<body>
<div style="float:left;width:200px;border:1px solid lightgray;margin:0px 23px;"><!--leftmenu-->
<ol id="menu">
<li>
<a href="home.php#" id="ds1">Wingardium</a>
<img class="wings" src="images/downarrow.png" style="width:17px;height:17px;cursor:pointer;float:right;"/>
<div class="box" style="margin:6px 0px;">
<a href="home.php?id=1">Wingardium1</a><br>
<a href="home.php?id=2">Wingardium2</a>
</div>
</li>
<li>
<a href="home.php#" id="ds2">Data streams</a>
<img class="wings" src="images/downarrow.png" style="width:17px;height:17px;cursor:pointer;float:right;"/>
<div class="box" style="margin:6px 0px;">
<a href="home.php?id=1">Stream1</a><br>
<a href="home.php?id=2">Stream2</a>
</div>
</li>
</ol>
</div>
<div style="float:left;width:800px;border:1px solid lightgray;margin:0px 23px;"><!--rightmenu-->
<ul id="tabs">
<li><a id="tab1">Wingardium</a></li>
<li><a id="tab2">Data streams </a></li>
</ul>
<div class="container" id="tab1C">Wingardium content
<?php
if (isset($_GET["id"]))
echo 'there is id';
else
echo 'normal content';
?>
</div>
<div class="container" id="tab2C">Data streams content
<?php
if (isset($_GET["id"]))
echo 'there is id';
else
echo 'normal content';
?>
</div>
</div>
</body>
</html>
Ответ №1:
Попробуйте это..
$ (document).ready(function()
{
$ (".wings").click(function(event)
{
$(".box").slideUp("slow");
if ($(this).next().is(":hidden") == true)
{
$(this).next().slideDown("slow");
}
return false;
});
$('#menu li').click(function(e){
e.preventDefault();
ind = $(this).index()
if(ind == 0)
$('#tabs li:first').click()
else
$('#tabs li:eq(1)').click();
return false;
})
//(".box").hide("slow");
});
//--RIGHT_MENU TAB SCRIPT----//
$ (document).ready(function()
{
$('#tabs li a:not(:first)').addClass('inactive');
$('.container').hide();
$('.container:first').show();
$('#tabs li').click(function()
{
var t = $('a',this).attr('id');
if($('a',this).hasClass('inactive'))
{ //this is the start of our condition
$('#tabs li a').addClass('inactive');
$('a',this).removeClass('inactive');
$('.container').hide();
$('#' t 'C').fadeIn('slow');
}
return false;
});
});
Если у вас все еще есть проблема, поместите ее в jsfiddle.
Комментарии:
1. У меня есть небольшое изменение здесь… Я обновил свой код
2. Не могли бы вы сказать мне, почему содержимое ссылок не отображалось
3. вы не написали событие для щелчка меню, поэтому содержимое не отображалось
4. Нужно ли мне также писать js-скрипт типа «#menu li» для дочерних узлов
5. Это зависит от ваших требований, как и что вы хотите?