2

我想选择a标签并在单击时显示其文本。

换句话说，当我单击第一个链接 - “One”时，我想使用alert.

当我单击第二个链接 - “示例”时，我想使用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。

下面是树形结构：

在此处输入图像描述

这是我的完整 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);
                }
            });
        }
    });
});
4

4 回答 4

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

演示

阅读更多关于jQuery 选择器.text()的信息

根据编辑

您可以尝试如下：

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

dynatree 的每个叶节点都是具有 等类的跨度dynatree-exp-c，dynatree-exp-c1所以我[class^=dynatree-exp-c]用来选择类以 . 开头的跨度dynatree-exp-c。

于 2012-06-06T17:05:27.350 回答
1 
$('a').click(function(){
    alert($(this).text());
    return false;
});
于 2012-06-06T17:07:54.247 回答
0

使用这个脚本。

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

这是演示

于 2012-06-06T17:07:54.113 回答
0 
$('a').click(function(e){
    alert( $(this).text() );
    e.preventDefault();
});
于 2012-06-06T17:12:28.283 回答