样式单选按钮下划线文本

Question

所以我会得到文本：“牛津......真实的例子”和需要下划线并在下方有单选选项的短语（图片中没有单选按钮，但我还需要供用户选择的单选按钮）。

如何使用 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
});

（当您调整窗口大小时，该示例将自动重新计算位置。）

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