1

I have tried to make a pager in where I can click on a page number, the color then turns to grey. But it seems to fail miserably. Why is this code not making the pager number that's clicked on grey? I'm trying to fix it now hopefully it will work.

function my(i) {
    document.getElementsByClassName('number')[0].removeAttribute("id");
    i.id = "act";
}


.pager li.active > a:active {
    color: grey !Important;
}
        
.pager > li > a.right-arrow {
    margin-left: 410px;
    width: 30px;
    border-radius: 50%;
    box-shadow: 0px 0px 5px #9ecaed;
    font-size: 15px;
    padding: 7px;
    line-height: 1;
}

.pager > li > a.left-arrow {
    margin-right: 410px;
    width: 30px;
    border-radius: 50%;
    box-shadow: 0px 0px 5px #9ecaed;
    font-size: 15px;
    transform: rotate(180deg);
    padding: 7px;
    line-height: 1;
}
        
.number {  
    border-color: white !Important;
    padding: 5px !Important;
}

a {
    color: black !Important;
}

#act {
    color: red !Important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="text-center">
    <ul class="pager">
        <li><a href="#" class="left-arrow">➜</a></li>
        <li><a href="" class="number" id="act" onclick='my(this);'>1</a></li>
        <li><a href="" class="number"  onclick='my(this);'>2</a></li>
        <li><a href="" class="number"  onclick='my(this);'>3</a></li>
        <li class="number">...</li>
        <li><a href="" class="number"  onclick='my(this);'>7</a></li>
        <li><a href="" class="number"  onclick='my(this);'>8</a></li>
        <li><a href="" class="number"  onclick='my(this);'>9</a></li>
        <li><a href="" class="right-arrow">➜</a></li>
    </ul>
</div>
julianstark999
  • 3,450
  • 1
  • 27
  • 41
pac bell
  • 31
  • 7
  • Why have you tagged `javascript` if you aren't using it? – NewToJS Dec 20 '17 at 12:22
  • I'm new to snippet. Sorry. I copy pasted an example one. I'm from indonesia and dont know good english sorry. – pac bell Dec 20 '17 at 12:23
  • 2
    If you want something to happen when you click something, you probably want some kind of event listener/handler to look out for a click and respond with an appropriate action. I don't see anything like that in your current code. I would recommend doing some further reading (https://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick) and coming back with a more complete question. – souldeux Dec 20 '17 at 12:53

4 Answers4

1

you have set it to color not for background that's why it is not producing grey color 

function my(i){
  document.getElementById('act').removeAttribute("id");
 i.id = "act";
}
.pager > li > a {
        color: black !Important;
    }
    .pager >li:active > a:active {
        color: grey !Important;
    }
    
        .pager > li > a.right-arrow {
            margin-left: 410px;
            width: 30px;
            border-radius: 50%;
            box-shadow: 0px 0px 5px #9ecaed;
            font-size: 15px;
            padding: 7px;
            line-height: 1;
        }
    
        .pager > li > a.left-arrow {
            margin-right: 410px;
            width: 30px;
            border-radius: 50%;
            box-shadow: 0px 0px 5px #9ecaed;
            font-size: 15px;
            transform: rotate(180deg);
            padding: 7px;
            line-height: 1;
        }
    
    .number {  
        border-color: white !Important;
        padding: 5px !Important;
    }
    #act{
        color: grey !Important;
    }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="text-center">
    <ul class="pager">
        <li><a href="#" class="left-arrow " onclick='my(this);'>➜</a></li>
        <li><a href="" class="number" id=act onclick='my(this);'>1</a></li>
        <li><a href="" class="number" onclick='my(this);'>2</a></li>
        <li><a href="" class="number" onclick='my(this);'>3</a></li>
        <li class="number">...</li>
        <li><a href="" class="number" onclick='my(this);'>7</a></li>
        <li><a href="" class="number" onclick='my(this);'>8</a></li>
        <li><a href="" class="number" onclick='my(this);'>9</a></li>
        <li><a href="" class="right-arrow">➜</a></li>
    </ul>
</div>
jasinth premkumar
  • 1,430
  • 1
  • 12
  • 22
0

A small typo error later... Hopefully this should work...

.pager > li:active > a:active {
    color: grey !Important;
}

Codepen link: https://codepen.io/anon/pen/ppbgBw

Nikhil Eshvar
  • 485
  • 3
  • 16
  • Yes it works only when you click on it. How can I keep it grey when it's clicked upon? I need to emphasize the page the user is on – pac bell Dec 20 '17 at 12:27
0

You have to use the hash tag (#) inside your link's href attribute for all links.

Like this

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="text-center">
    <ul class="pager">
        <li><a href="#" class="left-arrow">➜</a></li>
        <li><a href="#" class="number">1</a></li>
        <li><a href="#" class="number">2</a></li>
        <li><a href="#" class="number">3</a></li>
        <li class="number">...</li>
        <li><a href="#" class="number">7</a></li>
        <li><a href="#" class="number">8</a></li>
        <li><a href="#" class="number">9</a></li>
        <li><a href="#" class="right-arrow">➜</a></li>
    </ul>
</div>
John
  • 10,165
  • 5
  • 55
  • 71
  • I did but I cant make it active. Only when it's clicked its active after that it returns to black color. How can I fix this? – pac bell Dec 20 '17 at 12:50
  • If you want one of the numbers to be active initially, you have to do something like this: https://stackoverflow.com/questions/2147844/how-to-set-a-active-link-as-default-when-page-first-time-load. I am not sure if that is what you mean? – John Dec 20 '17 at 12:55
  • If you want more than one number to have gray background, you have to include some javascript, and add or remove the `active` class from your anchors. Something like this: https://stackoverflow.com/questions/19142653/adding-removing-class-to-anchor-tag-with-jquery-twitter-bootsrap-buttons or this: https://jaketrent.com/post/addremove-classes-raw-javascript/ – John Dec 20 '17 at 12:56
  • I really try to attach javascript to my but it's just not triggering or working – pac bell Dec 20 '17 at 13:05
  • Try to update your question with your attempt using javascript. And also, which one of the scenarios I promoted suits your problem? "Active number at page load" or "More than one active number"? Your question (problem description) needs to be updated if you want one of the scenarios I mentioned above. – John Dec 20 '17 at 13:08
0

.pager li.active > a:active {
    color: grey !Important;
}
        
.pager > li > a.right-arrow {
    margin-left: 410px;
    width: 30px;
    border-radius: 50%;
    box-shadow: 0px 0px 5px #9ecaed;
    font-size: 15px;
    padding: 7px;
    line-height: 1;
}

.pager > li > a.left-arrow {
    margin-right: 410px;
    width: 30px;
    border-radius: 50%;
    box-shadow: 0px 0px 5px #9ecaed;
    font-size: 15px;
    transform: rotate(180deg);
    padding: 7px;
    line-height: 1;
}
        
.number {  
    border-color: white !Important;
    padding: 5px !Important;
}

a {
    color: black !Important;
}

#act {
    color: red !Important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="text-center">
    <ul class="pager">
        <li><a href="#" class="left-arrow">➜</a></li>
        <li><a href="" class="number" id="act" onclick='my(this);'>1</a></li>
        <li><a href="" class="number"  onclick='my(this);'>2</a></li>
        <li><a href="" class="number"  onclick='my(this);'>3</a></li>
        <li class="number">...</li>
        <li><a href="" class="number"  onclick='my(this);'>7</a></li>
        <li><a href="" class="number"  onclick='my(this);'>8</a></li>
        <li><a href="" class="number"  onclick='my(this);'>9</a></li>
        <li><a href="" class="right-arrow">➜</a></li>
    </ul>
</div>
Awlad abdelghaffar
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 20 '23 at 23:45