简单的 jQuery 脚本的问题答案

【问题标题】：trouble with simple jQuery script简单的 jQuery 脚本的问题
【发布时间】：2016-05-10 16:45:52
【问题描述】：

我是 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>

但现在我想要一个可用于菜单上所有项目的单一函数，而不是为每个项目执行一个函数。

【问题讨论】：

标签： javascript jquery html hyperlink href

【解决方案1】：

试试这个解决方案（以前包括 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/

【讨论】：

我试过了，它有效，谢谢。真的很容易理解

【解决方案2】：

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/

【讨论】：

我试过你的，它工作。谢谢。我只是不明白为什么仅 href 不足以将菜单项指向其内容。为什么需要包含数据内容？
href="#doc1" 是纯 html，它只是帮助您滚动到书签的位置，但不包含任何 javascript 或 jquery 函数，如 show 和隐藏。 data-content 是一个自定义属性，用于存储按钮与内容的关系，当按钮点击时获取的内容ID应该由$(this).attr("data -内容”）；。 hyperlinkcode.com/bookmark.php
href="#docX" 在这种情况下是没有用的，实际上你可以在这里删除它。
而不是 $(this).attr("data-content");使用 $(this).data("content");

【解决方案3】：

抱歉，由于我试图在手机上回答问题，所以我原来的答案是错误的。尝试使用它以及您想显示/隐藏的任何内容来代替“a”。我已经使用切换方法来隐藏/显示

$(document).ready(function() {
    $('li').click(function() {
        $('a', this).toggle();
    });
});

在这里查看 js fiddle：https://jsfiddle.net/rf5up5fr/12/

【讨论】：