如何使用 css 或 javascript 设置所选按钮/链接的样式？

发布于 2024-11-28 19:56:38 字数 159 浏览 2 评论 0原文

我想设计我选择的按钮的样式。我想在所选按钮的图像周围显示浅蓝色边框，以显示用户所在的页面。（或者仅在按下按钮时使用与所选按钮图像相同的悬停图像。）我没有成功使用 css 链接选择器 :visited、:focus 或 :selected。这需要 JavaScript 解决方案吗？感谢您的指点！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

放肆 2024-12-05 19:56:38

我通常只是一个名为 selected 的额外类名，

   <div class="button selected">Button 1</div> 
   <div class="button">Button 2</div>

  .selected {
      border: 1px solid #0000ff;
  }

这取决于您显示页面的方式（使用 ajax 或每次点击刷新）。如果您使用 javascript 加载页面内容，则只需在单击按钮时使用 javascript 添加额外的类名即可。

i usually just a extra class name called selected

   <div class="button selected">Button 1</div> 
   <div class="button">Button 2</div>

  .selected {
      border: 1px solid #0000ff;
  }

It depends on how you display your page (using ajax or refresh on every click). If you are using javascript to load the page content than you just put an extra classname using javascript when the button is clicked.

回复收藏 0 原文

疧_╮線 2024-12-05 19:56:38

你应该在css中使用 :active 伪类来实现你想要的。

回复收藏 0 原文

压抑⊿情绪 2024-12-05 19:56:38

使用 CSS 的 jQuery 解决方案

您可能需要首先检查它是否被选中，这样该解决方案可以与 Twitter Bootstrap 等类似的东西一起使用，您可以在其中使任何元素充当按钮：

$(function () {
    $('div.button').click(function(){
        if ($(this).hasClass('selected') {
                $(this).removeClass('selected');
                //Insert logic if you want a type of optional click/off click code
            } 
            else
            {
                $(this).addClass('selected');
                //Insert event handling logic
            }
    })
});

jQuery Solution with your CSS

You would probably want to check first if it is selected, that way this solution works with things like Twitter Bootstrap, where you can make any element act like a button:

$(function () {
    $('div.button').click(function(){
        if ($(this).hasClass('selected') {
                $(this).removeClass('selected');
                //Insert logic if you want a type of optional click/off click code
            } 
            else
            {
                $(this).addClass('selected');
                //Insert event handling logic
            }
    })
});

回复收藏 0 原文

空心↖ 2024-12-05 19:56:38

事实上，您将需要使用 javascript。我不久前在一个项目中做到了这一点，通过迭代导航栏中的链接，并在用户当前访问的类上设置一个名为“selected”的类。

如果您使用 jQuery，您可以像这样完成它：

$(function() { 
    $('#navbar li').each(function() { 
        if ($(this).children('a').attr('href') == window.location.pathname)
        {
            $(this).addClass('active');
        }
    });
})

CSS 伪选择器 :active 在页面重新加载后将不再处于活动状态。

You will, in fact, need to use javascript. I did this in a project a while back, by iterating through the links in the navbar, and setting a class called "selected" on the one the user is currently visiting.

If you use jQuery, you can accomplish it like this:

$(function() { 
    $('#navbar li').each(function() { 
        if ($(this).children('a').attr('href') == window.location.pathname)
        {
            $(this).addClass('active');
        }
    });
})

The CSS Pseudo-selector :active won't still be active after a pagereload.

回复收藏 0 原文

~没有更多了~