js 根据<a>标签的内容来判断链接内容

Posted 2023-05-08

要实现这样<a herf="a" id="a">样式1</a>

根据<a>标签里的内容更改链接
如果是样式1，链接为a
如果是样式2，链接为b
……
这种，求帮忙！

参考技术A $(document).ready(function ()
$("a").each(function ()
if ($.trim($(this).val()) == "样式1")
$(this).attr("href", "链接1");

else if ($.trim($(this).val()) == "样式2")
$(this).attr("href", "链接2");

);
);追问

怎么和我平常看的js语言不太一样呢

追答

这是jquery

本回答被提问者采纳

<a> 标签内的图像和文本

【中文标题】<a> 标签内的图像和文本

【英文标题】：Image and text inside of <a> tag

【发布时间】：2011-11-07 19:08:27

【问题描述】：

这是生成的 html asp.net（删除了一些客户端识别细节）

在 Windows XP / IE 7 中，单击图像不会执行任何操作。单击文本执行超链接。右键单击任意位置然后选择open in new window 或open 也可以。

在其他浏览器中，一切正常。

任何人都可以看到我可以做些什么来让它在 IE7 中正常工作？

<div id="hdrXXX">                      
            <a id="ctl00_XXX" title="XXX" class="hdrXXX" href="http://google.com" target="_blank">
                 <div style="float:left;display: block;"> 
                    <img id="ctl00_XXX" src="Images/XXX.png" style="border-width:0px;" />
                </div>
                <div style="float:left; display: block; padding:15px 0 0 0;"> 
                    <span id="XXX">Some text right here</span>

                </div>
            </a>  
       </div>  

【问题讨论】：

您只能将块级元素放在带有 HTML5 的锚元素中，并且浏览器支持仍然有点不确定。 IE7 显然不支持这个。

@animuson - 你能把它添加为答案吗？

【参考方案1】：

您只能将块级元素放在带有 HTML5 的锚元素中，并且浏览器支持仍然有点不确定。 IE7 显然不支持这个。

您不需要使用除法来执行此操作：

<div id="hdrXXX">                      
    <a id="ctl00_XXX" title="XXX" class="hdrXXX" href="http://google.com" target="_blank">
        <img id="ctl00_XXX" src="Images/XXX.png" style="border: 0; float: left; margin-right: 15px" /> 
        <span id="XXX">Some text right here</span>
    </a>  
</div>

这应该可以达到同样的效果...

【讨论】：

阅读：“您只能将块级元素放入锚元素中如果您使用的是 HTML5”

【参考方案2】：

尝试删除 div，因为 img 标签和 span 自然是显示内联的。添加显示块，如果您需要标签本身的边距，则向左浮动，就像添加 div 一样。另外，在anchor标签中，添加overflow:hidden（如果你使用浮动的话），这样就占据了两个子元素的总空间。

【参考方案3】：

由于您的浮动，锚点坍塌。此外，您不能将块级元素 <div/> 放入内联元素 <a/>。

保持您那里的非 W3C 代码，您需要在关闭 </a> 之前使用此代码清除您的浮点数

<div style="clear: both"></div>

您可能希望创建一个名为.clear 的类并将样式移至该类。这是我网站上的一个例子：

.clear-fix 
clear: both !important;
display: block !important;
font-size: 0 !important;
line-height: 0 !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;

编写符合 W3C 的代码的更好方法如下：

<div id="hdrXXX">                      
    <a id="ctl00_XXX" title="XXX" class="hdrXXX" href="http://google.com" target="_blank">
        <span style="float:left;display: block;"> 
            <img id="ctl00_XXX" src="Images/XXX.png" style="border-width:0px;" />
        </span>
        <span style="float:left; display: block; padding:15px 0 0 0;"> 
            <span id="XXX">Some text right here</span>
        </span>
        <span class="clear-fix"></span>
    </a>  
</div>