我有"按钮"，可以改变网页上的语言:
<div class="wrapper">
<a class="button-link" href= "<?php echo qtrans_convertURL(get_permalink(), 'de'); ?>" target="_parent">DE</a>
<a class="button-link" href="<?php echo qtrans_convertURL(get_permalink(), 'en'); ?>" target="_parent">EN</a>
</div>
我做了一个悬停效果，来显示将要选择的语言:
.button-link:hover {
color: #fff;
border-bottom: 2px solid #e95252;
}
现在我试图在所选语言下保持这条边界线。这样用户就能看到活动语言。我原以为就这么简单:
.button-link:active{}
但是它没有按我想要的方式工作，所以我想我必须写一个php函数。我已经找到了如何显示当前页面的示例，但它与语言不一样。因为语言按钮是独立于页面的，所以如果用户选择了英语，它应该始终保持下划线，例如
这样做的一种方法是将class="<?= $lang = 'de' ? 'active' : '' ?>"添加到每个.button-link。因为它们都在做同样的事情，所以会更简单:
<?php
$langs = array('de', 'fr', 'it', 'en');
?>
<div class="wrapper">
<?php foreach ($langs as $lang) : ?>
<a class="button-link" href="<?= qtrans_convertURL(get_permalink(), $lang); ?>" class="<?= qtrans_getLanguage() == $lang ? 'active-lang' : '' ?>" target="_parent"><?= strtoupper($lang); ?></a>
<?php endforeach; ?>
</div>
而在CSS中，你只需要选择
.active-lang {}
或
.button-link.active-lang {}
您可以尝试以下操作PHP:
<?php if(qtrans_getLanguage()=='de'): ?>
<a class="button-link active" href= "<?php echo qtrans_convertURL(get_permalink(), 'de'); ?>"
target="_parent">DE</a>
<?php endif; ?>
.active {
border-bottom: 2px solid #e95252;
}
祝你好运!
可以这样做:定义新类>
.button-link-active {
border-bottom: 2px solid #e95252;
}
然后使用以下代码在链接中添加class:
<?php if ( qtrans_getLanguage() == "en" ){ echo "button-link-active" } ?>
最终代码将是这样的:
<a class="button-link <?php if ( qtrans_getLanguage() == "en" ){ echo "button-link-active" } ?> " href= "<?php echo qtrans_convertURL(get_permalink(), 'de'); ?>" target="_parent">DE</a>