Question

我创建了一个文本页面，当用户使用slideToggle()点击链接时，会弹出信息。

当您点击下一个链接时，上一个文字段会自动关闭（也使用slideToggle）。

＆＃13;

jQuery(document).ready(function() {
    jQuery('.textbox a').next('.textbox p').hide();
    jQuery('.textbox a').click(function() {
        $('.active').not(this).toggleClass('active').next('.textbox p').slideToggle();
        $(this).toggleClass('active').next().slideToggle();
    });
});

＆＃13;

.textbox {
    width: 50px;
    text-align: center;
    float: left;
}

.textbox a {
    cursor: pointer;
}

＆＃13;

<div id="textbox1" class="textbox">
    <a>Link1</a>
    <p>Text that is toggled.</p>
</div>
<div id="textbox2" class="textbox">
    <a>Link2</a>
    <p>Text that is toggled.</p>
</div>
<div id="textbox3" class="textbox">
    <a>Link3</a>
    <p>Text that is toggled.</p>
</div>
<div id="textbox4" class="textbox">
    <a>Link4</a>
    <p>Text that is toggled.</p>
</div>

＆＃13;

如何获得有效的＆＃34;链接＆＃34;强调？我已经尝试了几件事，但我能得到的最接近的是，一旦一个链接处于活动状态，每个链接都会加下划线。

Answer 1

您可以使用CSS text-decoration:underline;。

无论你在CSS中做什么，只要你将它应用到.active类，它就只会应用于活动链接。

jQuery(document).ready(function() {
    jQuery(".textbox a").next(".textbox p").hide();
    jQuery(".textbox a").click(function() {
        $('.active').not(this).toggleClass('active').next('.textbox p').slideToggle();
        $(this).toggleClass('active').next().slideToggle();
    });
});

.textbox{           width: 50px;
                    text-align: center;
                    float: left;}

.textbox a{         cursor: pointer;}
/* This is the only line you need to add: */
/* Or you could use border-bottom:1px solid black; instead. */
.active {text-decoration:underline;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="textbox1" class="textbox">
    <a>Link1</a><p>Text that is toggled.</p>
</div>
<div id="textbox2" class="textbox">
    <a>Link2</a><p>Text that is toggled.</p>
</div>
<div id="textboxe" class="textbox">
    <a>Link3</a><p>Text that is toggled.</p>
</div>
<div id="textbox4" class="textbox">
    <a>Link4</a><p>Text that is toggled.</p>
</div>

下划线活动链接slideToggle（jQuery）

1 个答案: