如何转型 <a href=“#”></a> 到&lt;％= link_to％&gt;与CSS？

Question

How to transform (a href) to <%= link_to %>?

This code is work, but I don't need in it.

<li><a href="users"><span>User</span></a></li>

I need to rails code with <%= link_to %>. But I want that styles weren't gone.

<li><%= link_to user_path %></li>

style

#mainNav a:active{
        top:1px;
    }
    #mainNav a:hover span ,
    #mainNav li.active span {
        background-image: linear-gradient(bottom, rgb(71,83,101) 0%, rgb(123,145,177) 100%);
        background-image: -o-linear-gradient(bottom, rgb(71,83,101) 0%, rgb(123,145,177) 100%);
        background-image: -moz-linear-gradient(bottom, rgb(71,83,101) 0%, rgb(123,145,177) 100%);
        background-image: -webkit-linear-gradient(bottom, rgb(71,83,101) 0%, rgb(123,145,177) 100%);
        background-image: -ms-linear-gradient(bottom, rgb(71,83,101) 0%, rgb(123,145,177) 100%);

        background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0, rgb(71,83,101)),
            color-stop(1, rgb(123,145,177))
        )
    }

Answer 1

In order to output in erb exactly what you have in your original html , you could use the following:

<li>
  <%= link_to user_path do %>
    <span>User</span>
  <% end %> 
</li>

Answer 2

Update it:-

<li id="mainNav"><%= link_to "Users", users_path %></li>

style

#mainNav a:active{
        top:1px;
    }
    #mainNav a:hover ,
    #mainNav li.active {
        background-image: linear-gradient(bottom, rgb(71,83,101) 0%, rgb(123,145,177) 100%);
        background-image: -o-linear-gradient(bottom, rgb(71,83,101) 0%, rgb(123,145,177) 100%);
        background-image: -moz-linear-gradient(bottom, rgb(71,83,101) 0%, rgb(123,145,177) 100%);
        background-image: -webkit-linear-gradient(bottom, rgb(71,83,101) 0%, rgb(123,145,177) 100%);
        background-image: -ms-linear-gradient(bottom, rgb(71,83,101) 0%, rgb(123,145,177) 100%);

        background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0, rgb(71,83,101)),
            color-stop(1, rgb(123,145,177))
        )
    }