div+css中做链接时如何去掉下面的横线?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了div+css中做链接时如何去掉下面的横线?相关的知识,希望对你有一定的参考价值。
使用CSS样式可以去除链接中的下划线。示例代码如下,有注释,可以根据自己的需要修改,请参考:
<style>
a:link text-decoration: none; /*正常情况下无下划线*/
a:visited text-decoration: none; /*访问过的链接无下划线*/
a:hover text-decoration: underline; /*鼠标指向时显示下划线*/
a:active text-decoration: underline; /*鼠标按下时也显示*/
</style> 参考技术A 你直接在样式表中加入atext-decoration:none;即可。
但如果你想让a标签的某个属性有下划线,就可以再加入样式:
例如给a标签的a:hover加入样式:a:hovertext-decoration:underline; 参考技术B 这么写
<a href="#" style="text-decoration: none">这个连接没横线</a>
如果想要所有连接都没横线
在全局css里
<style>
atext-decoration: none;
</style>
即可
单击特定的标签时,我希望显示下面的 div,其中包含其他链接
【中文标题】单击特定的标签时,我希望显示下面的 div,其中包含其他链接【英文标题】:on click to a specific a tag I want a below div with other links inside to be shown 【发布时间】:2017-08-11 10:01:05 【问题描述】:我已经掌握了这个“简单”的技巧,我有一个带有 6 个链接的导航栏,如果我点击其中一个,我希望在下面显示一个带有其他链接的 div。 到目前为止,我能够做到这一点“工作”,但只是出现了第一个链接的第一个 div。 如果我单击第二个链接,我应该能够显示具有不同链接的第二个 div。 不知道如何存档,如果可能的话希望得到澄清。 我确信我可以使用兄弟姐妹或我尝试过的下一个,但我也确定我没有以正确的方式使用它们。 非常感谢您的帮助
这是目前的代码
HTML
<ul class="nav navbar-nav">
<li class="aetoggle-desktoplist"><span class="icon-myaccount"></span><a href="#">My Account</a></li>
<li class="aetoggle-desktoplist"><span class="icon-cards"></span><a href="#">Cards</a></li>
<li class="aetoggle-desktoplist"><span class="icon-travel"></span><a href="#">Travel</a></li>
<li class="aetoggle-desktoplist"><span class="icon-insurance"></span><a href="#">Insurance</a></li>
<li class="aetoggle-desktoplist"><span class="icon-rewards"></span><a href="#">Rewards</a></li>
<li class="aetoggle-desktoplist"><span class="icon-business"></span><a href="#">Business</a></li>
</ul>
如果我单击其中一个,我希望显示这些(div 内的这些链接位于导航栏下方,因此不在同一个父级中)关于之前单击的标签。我刚刚发布了其中的 2 个,但有 6 个
HTML
<div class="aedisplaydiv-belownavbar">
<div class="aedisplaydiv-belownavbar-inner">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6">
<ul>
<li><p>Card Account</p></li>
<li><a href="#">Account Home</a></li>
<li><a href="#">Rewgister for Online Services</a></li>
<li><a href="#">Activate a new Card</a></li>
<li><a href="#">Support 24/7</a></li>
<li><a href="#">Download the Amex App</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-3 col-sm-6">
<ul>
<li><p>Business Account</p></li>
<li><a href="#">American Express @Work</a></li>
<li><a href="#">Online Merchant Services</a></li>
<li><a href="#">International Payment for Businesses</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-3 col-sm-12">
<ul>
<li><p>Other Accounts</p></li>
<li><a href="#">International Money Transfer for Card Members</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Cards -->
<div class="aedisplaydiv-belownavbar">
<div class="aedisplaydiv-belownavbar-inner">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6">
<ul>
<li><p>Personal Cards</p></li>
<li><a href="#">Vies Personal Cards</a></li>
<li><a href="#">View Dollars and Euro Cards</a></li>
<li><a href="#">Credit Cards</a></li>
<li><a href="#"</a></li>
<li><a href="#">Refer friends. Get rewarded.</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-3 col-sm-6">
<ul>
<li><p>Small Business Cards</p></li>
<li><a href="#">View All Business Cards</a></li>
<li><a href="#">Compare Business Cards</a></li>
<li><a href="#">Gold Business Charge</a></li>
<li><a href="#">Platinum Business Charge</a></li>
<li><a href="#">Why American Express for your Business</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-3 col-sm-12">
<ul>
<li><p>Corporate Cards</p></li>
<li><a href="#">Find out about our Corporate Cards</a></li>
<li><a href="#">Compare Solutions</a></li>
<li><a href="#">Enquire about the Corporate Card programme</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-3 col-sm-12">
<ul>
<li><p>Gift Cards</p></li>
<li><a href="#">View Gift Cards</a></li>
</ul>
</div>
</div>
</div>
</div>
JS
$('.aetoggle-desktoplist').on("click", function (e)
e.preventDefault();
var $this = $('.aedisplaydiv-belownavbar');
$this.slideToggle('.aedisplaydiv-belownavbar').next().hide();
);
更新
大家好, 我有一个实际的更新,所以如果我点击链接,我必须滑动 div 里面的链接,如果再次点击相同的链接,我应该能够滑动相同的 div(到目前为止工作正常)但是新的事情是,如果我在第一个 div 打开前一个 div 时单击第二个链接应该先上滑,然后第二个应该下滑。 非常感谢
【问题讨论】:
【参考方案1】:也许你可以通过索引来连接这些元素。
如果您单击第一个链接 - 第一个 .aedisplaydiv-belownavbar 是目标。
类似:
$('.aetoggle-desktoplist').each(function (index)
var $this = $(this),
target = $('.aedisplaydiv-belownavbar').eq(index);
$this.on("click", function (e)
e.preventDefault();
target.slideToggle()
);
);
编辑:
$('.aetoggle-desktoplist').each(function (index)
var $this = $(this),
target = $('.aedisplaydiv-belownavbar').eq(index);
$this.on("click", function (e)
e.preventDefault();
// hide others
$('.aedisplaydiv-belownavbar is-open').hide()
// show this
target.addClass('is-open').show()
);
);
第二次编辑:
$('.aetoggle-desktoplist').each(function (index)
var $this = $(this),
target = $('.aedisplaydiv-belownavbar').eq(index);
$this.on("click", function (e)
e.preventDefault();
var isOpen = $('.aedisplaydiv-belownavbar.is-open');
if (isOpen.length > 0 && !isOpen.is(target))
isOpen.slideUp()
isOpen.removeClass('is-open');
target.addClass('is-open').slideDown()
return undefined;
if (isOpen.is(target))
target.removeClass('is-open').slideUp()
return undefined;
target.addClass('is-open').slideDown()
return undefined;
);
);
【讨论】:
这实际上是“工作”,但正在一个一个打开,如果点击一个新的,我想隐藏以前打开的,但非常感谢 对不起,伙计,确实尝试了一段时间,但又不确定出了什么问题。我赞成您的回答,因为它实际上是正确的,但几乎是完美的。如果单击此切换幻灯片向下或向上滑动,但如果打开并单击另一张幻灯片,则将其向上滑动,新点击的一张向下滑动 你还在使用 .slideToggle() 吗?您必须使用 .slideDown() 和 .slideUp()。因为您确切地知道哪个目标必须向下和向上滑动。 将 .hide() 替换为 slideUp() 将 .show() 替换为 slideDown() 是的,我尝试了此选项,但有 2 个问题,在您编辑的代码中,一旦打开它们就不会滑动。 2)然后因为 is-open 类与 .aedisplay-belownavbar-inner 内联,所以我尝试编写 $('.aedisplaydiv-belownavbar.is-open').slideUp() 并且有点做伎俩但再次自动向下滑动。谢谢【参考方案2】:您通常执行此操作的方式通常是将以下链接放在上方列表中。
<li class="aetoggle-desktoplist">
<span class="icon-myaccount"></span>
<a href="#">
My Account
<ul>
<li><p>Card Account</p></li>
<li><a href="#">Account Home</a></li>
<li><a href="#">Rewgister for Online Services</a></li>
<li><a href="#">Activate a new Card</a></li>
<li><a href="#">Support 24/7</a></li>
<li><a href="#">Download the Amex App</a></li>
</ul>
</a>
</li>
脚本:
$('.aetoggle-desktoplist > a').on("click", function (e)
$('.aetoggle-desktoplist ul').hide();
$(this).find('ul').show();
);
【讨论】:
是的,但这种风格很棘手,所以我更喜欢将它放在单独的 div 中,顺便说一句非常感谢 :-)以上是关于div+css中做链接时如何去掉下面的横线?的主要内容,如果未能解决你的问题,请参考以下文章
css如何设置能让一个div元素覆盖在div元素上后下面的div元素中的文字不显示出来