Question

在我的Html页面中，我需要在点击它时保持链接的选择： HTML代码：

    <table class="main-dev">
    <tr>
        <td>
            <a class='titleForm' style="cursor:pointer">
                labelA
            </a>
        </td>
    </tr>
    <tr>
        <td>
            <a class='titleForm' style="cursor:pointer">
                labelB
            </a>
        </td>
        </td>
    </tr>
    <tr>
        <td>
            <a class='titleForm' style="cursor:pointer">
                labelC
            </a>
        </td>
    </tr>
    <tr>
        <td>
            <a class='titleForm' style="cursor:pointer">
                labelD
            </a>
        </td>
    </tr>
</table>

“其他”选项是使用简单标签更改链接，并且需要在单击时保持选中标签： Html代码将是：

    <table class="main-dev">
    <tr>
        <td>
                labelA
        </td>
    </tr>
    <tr>
        <td>
                labelB
        </td>
        </td>
    </tr>
    <tr>
        <td>
                labelC
        </td>
    </tr>
    <tr>
        <td>
                labelD
        </td>
    </tr>
</table>

Answer 1

您可以使用JQ轻松完成此操作。请参阅下面的代码段

如果您想在同一链接上再次点击时删除selected课程，请将addClass更改为toggleClass

var link = $(".titleForm")
    
$(link).on("click",function() {
     var otherLinks = $(this).parents("tr").siblings().find(".selected")

		 $(this).addClass("selected")
		 $(otherLinks).removeClass("selected")

		  
})

.selected {
	color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="main-dev">
    <tr>
        <td>
            <a class='titleForm' style="cursor:pointer">
                labelA
            </a>
        </td>
    </tr>
    <tr>
        <td>
            <a class='titleForm' style="cursor:pointer">
                labelB
            </a>
        </td>

    </tr>
    <tr>
        <td>
            <a class='titleForm' style="cursor:pointer">
                labelC
            </a>
        </td>
    </tr>
    <tr>
        <td>
            <a class='titleForm' style="cursor:pointer">
                labelD
            </a>
        </td>
    </tr>
</table>

HTML：突出显示所选链接或标签

1 个答案: