我有一个左菜单显示右侧菜单上的项目和标签内容。
当我点击Wingardium或其子节点（leftmenu）时，内容应显示在右侧菜单的wingardium选项卡内.. likewise
当我点击数据流或其子节点（leftmenu）时，内容应显示在右侧菜单的“数据流”选项卡中.. likewise
但是在我的代码中，内容仅显示在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>
答案 0 :(得分：0)
试试这个..
$ (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。