87,907
社区成员
发帖
与我相关
我的任务
分享这句jquery 怎么不起作用
<script type="text/javascript">
//选项卡切换
$(document).ready
(
function () {
$(".ul_nav li").mouseover(function () {
$(this).parent("ul").children("li").removeClass("now");
$(this).addClass("now");
var bianhao = $(".ul_nav li").index(this);
$(this).parent("div").children("div").addClass("hide").removeClass("show");
$(this).parent("div").children("div").find(".div_c:eq(' + bianhao + ')").addClass("show").removeClass("hide");
});
}
)
</script><body>
<form id="form1" runat="server">
<div id="content">
<ul class="ul_nav">
<li>按钮1</li>
<li>按钮2</li>
<li>按钮3</li>
</ul>
<br class="clear" />
<div class="div_c show">div1</div>
<div class="div_c">div2</div>
<div class="div_c">div3</div>
</div>
<div id="Div1">
<ul class="ul_nav">
<li>按钮4</li>
<li>按钮5</li>
<li>按钮6</li>
</ul>
<br class="clear" />
<div class="div_c show">div4</div>
<div class="div_c">div5</div>
<div class="div_c">div6</div>
</div>
</form>
</body>
...全文
请发表友善的回复…
发表回复
qq137051908 2014-05-12
- 打赏
- 举报
我发了正确的代码，但你还是在用你原来的代码。
我也指出了原来代码的错误，但是你并未做任何修改。
qq137051908 2014-05-12
- 打赏
- 举报
楼主，今天才看到你发的消息 。
错误2: ".div_c:eq(' + bianhao + ')" 应使用双引号 这里已经跟你说过了，用双引号啊。 难道你看不出来吗。
find('div.div_c:eq(" + bianhao + ")') 这样 find()里面全部被当做字符串了， 并没有表达式
改成这样 find("div.div_c:eq(" + bianhao + ")")
epui2008 2014-05-09
- 打赏
- 举报
大家代码为什么不对？因为这个要求是适用于多组 选项卡的，现在的代码 一组选项卡没问题，如果二组就不行了，因为当你鼠标悬停于第一组选项卡中 第一个 按钮时候 ，第二组选项卡收到了影响，内容全部隐藏了，为了解决这个问题问题，所以才用了.parent().children() 这种写法，这种写法从结构上保证了，每组选项卡之间互不影响，但是这个写法不正确“ $(this).parent("div").children("div").find('div.div_c:eq(" + bianhao + ")').addClass("show").removeClass("hide");”
至于说“var bianhao = $(this).parent().find("li").index(this);” 这一句，改或者不改 都一样，问题不是出在这里
Cocl 2014-05-08
- 打赏
- 举报
$(document).ready(function(){
$(".ul_nav li").mouseover(function () {
$(this).siblings().removeClass("now");
$(this).addClass("now");
var bianhao = $(".ul_nav li").index(this);
console.log(bianhao);
$(".div_c").addClass("hide").removeClass("show");
$(".div_c:eq("+ bianhao +")").addClass("show").removeClass("hide");
});
})epui2008 2014-05-08
- 打赏
- 举报
顶，请高手指点一下，谢谢了
epui2008 2014-05-08
- 打赏
- 举报
3楼的代码就是正确的啊，你认真看过吗？
只需要把var bianhao这句改成var bianhao = $(this).parent().find("li").index(this);就可以实现多个了
[/quote]
看了，运行了，不行啊
qq137051908 2014-05-08
- 打赏
- 举报
3楼的代码就是正确的啊，你认真看过吗？
只需要把var bianhao这句改成var bianhao = $(this).parent().find("li").index(this);就可以实现多个了
epui2008 2014-05-07
- 打赏
- 举报
//选项卡切换
$(document).ready
(
function () {
$(".ul_nav li").mouseover(function () {
$(this).parent("ul").children("li").removeClass("now");
$(this).addClass("now");
var bianhao = $(this).parent().find("li").index(this);
$(this).parent("div").children("div").addClass("hide").removeClass("show");
$(this).parent("div").children("div").find('div.div_c:eq(" + bianhao + ")').addClass("show").removeClass("hide");
});
})epui2008 2014-05-07
- 打赏
- 举报
改成这样也可以啊，但是还是不执行。
问题就在最后一句：
别的地方都没问题，
$(this).parents("div").children("div:eq(" + bianhao + ")").addClass("show").removeClass("hide");
这句话正确写法应该如何写：
$(this).parent("div").children("div").find("div.div_c:eq(" + bianhao + ")").addClass("show").removeClass("hide");
这样写也不行啊
qq137051908 2014-05-07
- 打赏
- 举报
按照层级关系找不可以吗？
这样 var bianhao = $(this).parent().find("li").index(this);
epui2008 2014-05-07
- 打赏
- 举报
但是我正好需要找到这个子节点，不能用id，因为页面中div 很多，而且不同部分之间不能引发作用
qq137051908 2014-05-07
- 打赏
- 举报
//选项卡切换
$(document).ready(function () {
$(".ul_nav li").mouseover(function () {
$(this).parent("ul").children("li").removeClass("now");
$(this).addClass("now");
var bianhao = $(".ul_nav li").index(this);
$(this).parents("div").children("div").addClass("hide").removeClass("show");
$(this).parents("div").children("div:eq(" + bianhao + ")").addClass("show").removeClass("hide");
});
});
epui2008 2014-05-07
- 打赏
- 举报
不一样，我一个页面中，多处用到，你这个能多处引用吗？
t101lian 2014-05-07
- 打赏
- 举报
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
</body>
</html>
