简单的jQuery脚本出现问题
trouble with simple jQuery script
我是jQuery的新手,我想创建自己的网页。所以我的问题是如果我的菜单使用 href 将每个项目链接到其指定内容,如下所示。
<li><a href="#doc1">Doc1</a></li>
<li><a href="#doc2">Doc2</a></li>
<li><a href="#doc3">Doc3</a></li>
<script>
$(document).ready(function(() {
$(a).click(function() {
$(b).show();
});
});
</script>
我应该在"a"和"b"中输入什么?我尝试过谷歌搜索这个,但所有的例子都没有显示完整的脚本。我曾经这样做过:
<li id="doc1menu">Doc1</li>
<script>
$(document).ready(function() {
$("#doc1menu").click(function() {
$("#doc1content").show();
});
});
</script>
但是现在我想要一个可用于菜单上所有项目的函数,而不是为每个项目执行一个函数。
尝试这个解决方案(包括前面的jquery)
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<li><a class="menu" href="#" idmenu="doc1">Doc1</a></li>
<li><a class="menu" href="#" idmenu="doc2">Doc2</a></li>
<li><a class="menu" href="#" idmenu="doc3">Doc3</a></li>
<div class="content" id="doc1" style="display:none">doc1</div>
<div class="content" id="doc2" style="display:none">doc2</div>
<div class="content" id="doc3" style="display:none">doc3</div>
<javascript type='text/javascript'>
$(document).ready(function() {
$(".menu").click(function() {
id = $(this).attr("idmenu");
$(".content").hide();
$("#"+id).show();
});
});
</script>
测试:https://jsfiddle.net/Cuchu/cbtwndh6/
HTML
<li><a data-content="doc1" href="#doc1">Doc1</a></li>
<li><a data-content="doc2" href="#doc2">Doc2</a></li>
<li><a data-content="doc3" href="#doc3">Doc3</a></li>
<div id="doc1" class="content">
doc1
</div>
<div id="doc2" class="content">
doc2
</div>
<div id="doc3" class="content">
doc3
</div>
脚本
$(function() {
//hide all content
$(".content").hide();
//meun function
$("a").click(function() {
var attr = $(this).attr("data-content");
$(".content").hide();
$("#" + attr).show();
});
});
https://jsfiddle.net/ynpsq1wp/1/
抱歉,
由于我试图在手机上回答问题,我原来的答案是错误的。 尝试使用它和您想要显示/隐藏的任何内容来代替"A"。 我使用切换方法来隐藏/显示
$(document).ready(function() {
$('li').click(function() {
$('a', this).toggle();
});
});
在这里看js小提琴:https://jsfiddle.net/rf5up5fr/12/
相关文章:
- 将jQuery转换为用户脚本的普通Javascript时遇到问题
- PHP和JS脚本的奇怪问题,在我刷新页面之前第一次失败
- 一个简单的粘性头jQuery脚本的问题
- Javascript函数不工作.脚本定位问题
- Google 日历 API V3 会解决与会者和创建者 Java 脚本问题
- Ajax发布到PHP脚本,每5秒查询一次MySQL数据库的性能/问题
- 脚本加载问题
- 使用jqueryAjax和php脚本从mysql检索数据时遇到的问题
- 粘性js脚本出现问题
- 脚本化的blindUp/bblindDown问题
- JQuery脚本问题
- Javascript问题,flexslider脚本未加载
- Java脚本循环问题
- 我在向jquery脚本添加延迟时遇到问题
- 谷歌脚本javascript中的谷歌函数=importhtml解析问题
- 多个脚本导致链接问题?Javascript、CSS、HTML、Jquery
- 调用另一个php脚本生成图表时出现问题
- 脚本问题,获胜'Don’不允许我跑步和使用
- 客户端内服务器端经典ASP代码的问题<脚本>标签
- 在jQuery/JavaScript中使用承诺时遇到问题.脚本似乎没有等待