Question

当屏幕宽度为480px时，我想将内容“Hi”更改为其他内容。我尝试使用Pseudo元素，但没有显示。 Javascript，Jquery和css适用于答案提供。谢谢！

HTML

<li><a href="#service-tab-1" class="service-tab-1">Hi</a></li>

CSS

#service-tabs ul li a {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: #eaeaea;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 100px;
    text-align: center;
    margin-right: 5px;
}

Answer 1

试试这个，

.service-tab-1:before {
    content: 'Hi';
}

@media screen and (max-width: 480px) {
    .service-tab-1:before {
        content: 'Hello';
    }
}

<a href="#service-tab-1" class="service-tab-1"></a>

Answer 2

您可以使用以下jQuery代码。

$(document).ready(function () {
  $(window).resize(function () {
    width=$(window).width();
    if (width == 480){
      $(".service-tab-1").text("something else");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li><a href="#service-tab-1" class="service-tab-1">Hi</a></li>

此处$(window).width();获取窗口的当前宽度，$(".service-tab-1").text("something else");根据类名更改元素的文本。当浏览器窗口的大小改变时，$(window).resize()事件被发送到窗口元素

Answer 3

我用Pseudo元素[Pure CSS方法]做了一个快速演示。查看代码段并调整其大小以查看文本更改。您可以尝试不同的方法来实现此目的。

如果你想玩

，这是fiddle

＆＃13;

li a {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: #eaeaea;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 100px;
    text-align: center;
    margin-right: 5px;
}

li a:before {
  content: 'Hola';
  color: red;
  display: none;
}

@media screen and (max-width: 480px) {
  li a{
    color: transparent;
  }
  li a:before {
    display: block;
  }
}

＆＃13;

<li><a href="#service-tab-1" class="service-tab-1">Hi</a></li>

＆＃13;

Answer 4

您可以根据需要使用文档或窗口，并使用以下代码。

 <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
 <script>
 $(function(){if ($(window).width() = 480) {
      $(".service-tab-1").text("blab blab blab");
   }
 });
 </script>

Answer 5

Jquery可以帮助解决这个问题。一旦将选择器合并到项目中，只需确保更改选择器。

在我的代码段中，当屏幕低于或等于480时，它会发生变化。如果您只想要480宽度，请将if更改为：

if ($(window).width() == 480)

如果需要，很高兴为此提供帮助

＆＃13;

if ($(window).width() <= 480) {
  $('li a').text('Something else');
}

＆＃13;

#service-tabs ul li a {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: #eaeaea;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 100px;
  text-align: center;
  margin-right: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<li><a href="#service-tab-1" class="service-tab-1">Hi</a></li>

＆＃13;

更改href的内容

5 个答案: