Home/ Questions/Q 8098865
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T22:12:42+00:00

I have looked but have not found a specific answer for changing just one

  • 0

I have looked but have not found a specific answer for changing just one attribute.
Here is an example I cooked: I only want to change the display attribute.

<html>
    <head>
        <title>
            test
        </title>
        <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
            }
            a.move {
                height: 25px;
                width: 25px;
                display: inline-block;
                border: 1px #aaa solid;
                border-radius: 5px;
                text-align: center;
                text-decoration:  none;
                color: black;
            }
            a.move:hover {
                background-color: #aaa;
            }

—v This is the important css part

            li {
                display: inline-block;
                width: 370px;
                border: 1px #aaa solid;
            }

—v This is the important css part

        </style>
        <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript">
            var current = 1;
            var wait = 0;
            function next(){
                current++;
                update();
            }
            function prev(){
                current--;
                update();
            }

—v This is the important jquery part

            function update(){
                $('p').text(current);
                $('li').each(function(index) {
                    if(index != current)
                        $(this).css('display','none');
                    else
                        $(this).css('display','inline');

                });
            }

end of the important part —^

            $(function(){
                update();
                $('a.move.left').click(function(e){
                    if(wait) return;
                    e.preventDefault();
                    prev();
                });
                $('a.move.right').click(function(e){
                    if(wait) return;
                    e.preventDefault();
                    next();
                });
            });
        </script>
    </head>
    <body>
        <p> ... </p>
        <a class="move left" href="a">&lt;</a>&emsp;<a class="move right" href="b">&gt;</a></br>
        <ul>
            <li>123</li><!--
            --><li>123</li><!--
            --><li>456</li><!--
            --><li>789</li><!--
            --><li>abc</li><!--

            --><li>edf</li><!--
            --><li>ghj</li><!--
            --><li>!@#</li><!--
            --><li>$%^</li><!--
            --><li>ABC</li>
        </ul>
    </body>
</html>

Please advise.
Currently, what happens is that it removes all the other css attributes.
I could set all the attributes every time but I do not wish to.

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Modifying the css directly is (in most cases) not a good option.

    instead either use:

    $(this).show() and $(this).hide()

    or (my personal preference, since this is even more flexible):

    $(this).toggleClass("...") and create according CSS-classes in your stylesheet.

    Additionaly, you are changing the css of ALL you liitems: $('li').each – is this really what you want?

    The .css() method only changes the css-attribute you specify – it does not override other styles. If this seems to be the case, the problem probably lies somewhere else in your code.

    • 0