Question

我目前拥有CSS样式，可以将background-color和padding提供给＆＃34;上一页＆＃34;和＆＃34;下一步＆＃34;我网站产品页面上的按钮。

问题出现在产品结果的第一页，＆＃34; Previous＆＃34;的样式。按钮仍然显示，即使他们不是＆＃34;之前＆＃34;第一页的按钮。

如何使用javascript或jquery发送条件语句，将该按钮的样式更改为在第一页上不可见？

#SearchStyle {
    color: white;
    background-color: #3498db;
    padding: 10px;
    padding-right: 20px;
  }

#SearchStyle2 {
    color: white;
    background-color: #3498db;
    padding: 10px;
    padding-right: 20px;
  }

.CategoryPagination {
    color: #075899;
    text-align: center;
}

<div class="CategoryPagination">
        <div class="FloatLeft" id="SearchStyle"></div>
        <div class="FloatRight" id="SearchStyle2">
        <a href="http://www.catholictothemax.com/products.html? 
         sort=featured&amp;page=2">Next</a></div>

您还可以在此处的页面上看到问题： http://www.catholictothemax.com/search.php?search_query=dog+tags

Answer 1

使用addClass和removeClass方法。

if(condition) {
  $(element).addClass('class1');
  $(element).removeClass('class2');
}

Answer 2

由于其padding: 10px;！

，它仍会显示出来

你可以完全删除填充，在这种情况下，按钮的样式会变得混乱，但是当它们中没有内容时它们会消失，或者当这些按钮为空时（或许使用javascript或jquery），然后将它们设置为display:none;，这样无论它们具有什么样式，它们都不会显示，或者只是删除该按钮上的填充。

具有填充的特定类是<div class="FloatRight"和<div class="FloatLeft"，因此您应该使用以下内容对其进行定位：.FloatRight { padding: 0; }或.FloatRight { display: none; } //无论您选择什么！

Answer 3

如果div中没有任何内容，请使用jquery隐藏div。

if($('#FloatLeft').html() == ''){
    $('#FloatLeft').remove();
}

只有在您的下一个和上一个按钮回发到服务器时才会有效。如果您的所有内容都是静态的，请改用：

//这需要你改变css类，就像我在下面解释的那样

$('.searchButton').on('click',function(){

    if($('#FloatLeft').html() == ''){
        $('#left').css('display','none');
    } else {
       $('#FloatLeft').css('display','block');
    }

}

修改

P.S。

为什么你有两个css类做同样的事情？为了便于阅读，请将其清理干净。如果您创建了两个，因为第二个元素没有应用样式，那是因为您使用了id而不是class。 id是唯一的，只会定位与id匹配的第一个元素。 #用于id，.用于class。

.searchButton {
    color: white;
    background-color: #3498db;
    padding: 10px;
    padding-right: 20px;
}

<div class="FloatLeft searchButton"></div>
<div class="FloatRight searchButton"> <a> whatever </a> </div>

Answer 4

更好的方法是：

使用jQuery
根据body class设置搜索部分的样式

你可以像这样在身体上添加一个类：

var $body = $('body');
if (condition) {
    $body.addClass('different-page')
}

然后，在你的CSS中：

.search-style {
    color: white;
    background-color: #3498db;
    padding: 10px;
    padding-right: 20px;
}

.different-page .search-style {
    background-color: #3498db;
}

您的HTML应如下所示：

<div class="CategoryPagination">
    <div class="FloatLeft search-style"></div>
    <div class="FloatRight search-style">
        <a href="http://www.catholictothemax.com/products.html? sort=featured&amp;page=2">Next</a>
    </div>
</div>

因为您将使用相同的类search-style，所以不需要冗余并重复CSS样式。您只需要覆盖一个值，背景颜色。

您还应避免在CSS中使用id和class选择器，因为您可能会遇到CSS特性问题。

使用javascript更改CSS样式，具体取决于页面

4 个答案: