Question

我想选择a标记并在点击时显示其文字。

换句话说，当我点击第一个链接 - “One”时，我想使用alert显示其文本“One”。

当我点击第二个链接 - “示例”时，我想使用alert显示文本“示例”。

<body>
    <div id="tree">
        <ul>
        <li><a target="_blank" href="one.html">One</a></li>
        <li class="folder expnded"><a target="_blank" href="two.html">Examples</a></li>
        </ul>
    </div>    
    <div id="display"></div>    
</body>

更新1：

感谢大家的回答。我真正想做的是我需要创建一个树结构，当我单击树叶节点时，我必须显示该叶节点的名称。

我使用jQuery DynaTree创建了树结构，但jQuery选择器在上面的代码中对我不起作用。

我无法在div标记内选择标记或任何其他元素。

以下是树形结构：

enter image description here

这是我的完整HTML代码（上面只是示例代码）

<html>
<head>
<!-- Include the required JavaScript libraries: -->
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src='js/jquery-ui-1.8.20.custom.min.js' type="text/javascript"></script>
<script src='js/myjquery.js' type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/ui.dynatree.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/jquery.dynatree.js" type="text/javascript"></script>

</head>

<body>
    <div id="tree">
        <ul>
            <li>one</li>
            <li><a target="_blank" href="">Google</a>
            <li class="folder expnded">Examples
                <ul>
                    <li><a target="content" href="" id="s">one</a>
                    <li><a target="content" href="two.html">two</a>
                    <li class="folder">Folder one
                        <ul>
                            <li><a target="content" href="one.html">one</a>
                            <li><a target="content" href="two.html">two</a>
                        </ul>
                    <li><a target="content" href="three.html">three</a>
                    <li><a target="content" href="four.html">four</a>
                    <li class="folder">Folder two
                        <ul>
                            <li><a target="content" href="one.html">one</a>
                            <li><a target="content" href="two.html">two</a>
                        </ul>
                    <li class="folder">Folder three
                        <ul>
                            <li><a target="content" href="one.html">one</a>
                            <li><a target="content" href="two.html">two</a>
                            <li class="folder">Inner Folder
                                <ul>
                                    <li><a target="content" href="one.html">one</a>
                                    <li><a target="content" href="two.html">two</a>
                                </ul>
                        </ul>
                </ul>
        </ul>
    </div>

    <div id="display">
    <a href="" id="s">one</a>
    </div>

</body>
</html>

我发布的图片是上述HTML代码的输出。

在myjquery.js文件中，我有像这样的代码（旧）

$(function() {
        // --- Initialize sample trees
        $("#tree").dynatree({
            autoFocus : true,
            //          persist: true,
            minExpandLevel : 2,
            onFocus : function(node) {
                // Auto-activate focused node after 1 second
                if (node.data.href) {
                    node.scheduleAction("activate", 1000);
                }
            },
            onBlur : function(node) {
                node.scheduleAction("cancel");
            },
            onActivate : function(node) {
                if (node.data.href) {
                    window.open(node.data.href, node.data.target);
                }
            }
        });
    });

更新2：

我的问题的解决方案

在myjquery.js文件中，以下新代码适用于我。您可以将其与上面的旧代码进行比较。

$(function() {
    // --- Initialize sample trees
    $("#tree").dynatree({
        autoFocus : true,
         persist: true,
        minExpandLevel : 1,
        onFocus : function(node) {
            // Auto-activate focused node after 1 second
            if (node.data.href) {
                node.scheduleAction("activate", 1000);
            }
        },
        onBlur : function(node) {
            node.scheduleAction("cancel");
        },
        onActivate : function(node) {
            if (node.data.href) {
                window.open(node.data.href, node.data.target);
            }
        },
        onClick : function(node) {
            $.ajax({
                type : "GET",
                url : "Display",
                data : {
                    id : node.data.title
                },
                success : function(data) {
                    $("#display").html(data);
                }
            });
        }
    });
});

Answer 1

$('a', '#tree li').on('click', function(e) {
  e.preventDefault();    // this line is for prevent page reload
  alert($(this).text());
});

<强> DEMO

详细了解.text()和jQuery selectors

根据编辑

您可以尝试如下：

$('span[class^=dynatree-exp-c] a').on('click', function(e) {
    e.preventDefault();
    alert( $(this).text() );
});

dynatree的每个叶节点都是具有dynatree-exp-c，dynatree-exp-c1等类的span，因此我使用[class^=dynatree-exp-c]来选择其类以dynatree-exp-c开头的范围。< / p>

Answer 2

$('a').click(function(){
    alert($(this).text());
    return false;
});

Answer 3

使用此脚本。

jQuery('a').click(function(){
   var x = jQuery(this).text();
    alert(x);
});

这是Demo

Answer 4

$('a').click(function(e){
    alert( $(this).text() );
    e.preventDefault();
});

如何使用jQuery选择锚标记内的文本

这是我的完整HTML代码（上面只是示例代码）

我的问题的解决方案

4 个答案:

根据编辑