javascript - 样式单选按钮下划线文本

Question

所以我会有文本:“The Oxford ....real examples”和需要加下划线的短语，并在下面有一个单选选项(图中没有单选按钮，但我也需要供用户选择的单选按钮)。

如何使用 css 和 javascript 实现这一点？

谢谢大家的帮助。

Answer 1

我相信这就是你想要的:

‍‍ http://jsfiddle.net/DerekL/NRpcn/

(为了简单起见，我在示例中使用了 jQuery)

var list = ["The", "well known", "meanings", "to give"];    //word list
var output = $("#output"),
    html = output.html();

for(var i = 0; i < list.length; i++) {
    //Wrap each keyword with <span>
    html = html.replace(new RegExp("(" + list[i] + ")", "i"), "<span>$1</span>");
}

output.html(html);

$("p>span").each(function (i) {              //Create the index for each one
    var x = $(this).offset().left,                  //Get the x
        y = $(this).offset().top,                   //Get the y
        width = +$(this).width(),                   //Get the width
        $select = $("<div>").addClass("select");

    $select.css({
        top: y + 20,
        left: x,
        width: width
    })
        .html(String.fromCharCode(65 + i))          //Set the index (A, B, C...)
        .appendTo("body");                          //Append it to the container
});

(该示例将在您调整窗口大小时自动重新计算位置。)

这是实现它的一种方法，还有许多其他方法可以实现。我个人更喜欢这个，因为它理解起来不是很复杂。