Question

我以前无法确定此问题是否已解决。我在网页上有四个按钮。我的问题如下：

我可以让第一个看起来＆＃34;按下＆＃34;默认情况下，当用户登陆页面时？
如何将他们留在＆＃34;按下＆＃34;只要用户在此页面上状态？他们会得到＃34;＃34;每当用户在此页面的任何位置单击时。我确信它可以用jQuery完成，但我无法弄清楚如何。

＆＃13;

ul.buttons {
    list-style-type: none;
    padding: 3px;
	font-family: 'Karla', sans-serif;
	font-weight: 700;
	font-size: 16px;
	margin-left: 0px;
}
ul.buttons li button {
   background-color: white;
   border: none;
   color: black;
   padding-bottom:0;	
   margin-left: -10px;
   text-decoration: none;
   font-family: 'Karla', sans-serif;
   font-weight: 700;
   font-size: 16px;
   cursor: pointer;
}

button:focus {
	outline:none;
}
	
button:focus::before {content: '×  ';

＆＃13;

<ul class="buttons">
    <li id="allbutton"><button autofocus">All</button></li>
    <li id="artbutton"><button>Art</button></li>
	<li id="musicbutton"><button>Music</button></li>
	<li id="writingbutton"><button>Writing</button></li>
</ul>

＆＃13;

Answer 1

如果您愿意，可以使用一些javascript？.. 见下面的演示

＆＃13;

var all_specific_btn = document.querySelectorAll('.btn');
console.log(all_specific_btn);
for (var index = 0; index < all_specific_btn.length; ++index) {

  all_specific_btn[index].onclick = function() {
    for (var index = 0; index < all_specific_btn.length; ++index) {
      console.log(all_specific_btn[index].children);
      if (all_specific_btn[index].children[0].style.opacity != "0") {
        all_specific_btn[index].children[0].style.opacity = "0"
      }
    }
    this.children[0].style.opacity = "1";
  }
}

＆＃13;

ul.buttons {
  list-style-type: none;
  padding: 3px;
  font-family: 'Karla', sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin-left: 0px;
}
ul.buttons li button {
  background-color: white;
  border: none;
  color: black;
  padding-bottom: 0;
  text-decoration: none;
  font-family: 'Karla', sans-serif;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}
.x {
  opacity: 0;
}
.btn{
  display:table;
}

＆＃13;

<ul class="buttons">
  <li id="allbutton" class="btn">
     <span>x</span><button autofocus>All</button>
  </li>
    <li id="artbutton " class="btn ">
      <span>x</span>
       <button>Art</button>
    </li>
	<li id="musicbutton "  class="btn ">
      <span>x</span>
      <button>Music</button>
  </li>
	<li id="writingbutton "  class="btn ">
      <span>x</span>
      <button>Writing</button>
  </li>
</ul>

＆＃13;

Answer 2

你必须先让它们看起来像3D ...... 然后，当点击它们时，addClass播放边框宽度和平移，以给出按下按钮的视觉印象。

我在这里做了一个简单的例子，这可能并不完美......但对你来说将是一个好的开始：

＆＃13;

$("button").on("click",function(){
	
	// Remove the class to all buttons
	$("button").each(function(){
		$(this).removeClass("pressed");
	});
	
	// Add the class to the clicked button
	$(this).addClass("pressed");
});

// First button is pressed by default
$("button").first().click();

＆＃13;

ul.buttons {
	list-style-type: none;
	padding: 3px;
	font-family: 'Karla', sans-serif;
	font-weight: 700;
	font-size: 16px;
	margin-left: 0px;
}
ul.buttons li button {
	background-color: white;
	border: none;
	color: black;
	/* padding-bottom:0;	*/
	margin-left: -10px;
	text-decoration: none;
	font-family: 'Karla', sans-serif;
	font-weight: 700;
	font-size: 16px;
	cursor: pointer;

	/* added */
	transition: all 0.2s linear;
	outline: 0;
	border-top:0px;
	border-right:0px;
	border-bottom:4px solid #9F9D9D;
	border-left:2px solid black;
	margin:5px;
	padding-left:1em;
}

button:focus {
	outline:none;
}

/* Everything below is added */
	button::before {
	/*content: '- ';*/
}
button.pressed:before {
	content: '× ';
}
button.pressed{
	box-shadow: none;
	-ms-transform: translate3d(-1px, 2px, 0);
	-webkit-transform: translate3d(-1px, 2px, 0);
	transform: translate3d(-1px, 2px, 0);

	border-top:0px !important;
	border-right:0px !important;
	border-bottom:0px !important;
	border-left:0px !important;
	padding-left:0.3em !important;
}



/* added only to see the buttons */
body{
	background-color:black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="buttons">
	<li id="allbutton"><button autofocus>All</button></li>
	<li id="artbutton"><button>Art</button></li>
	<li id="musicbutton"><button>Music</button></li>
	<li id="writingbutton"><button>Writing</button></li>
</ul>

＆＃13;

请注意，我添加了padding-left来保留使用＆＃34; x＆＃34;这是在按钮中添加的......

默认情况下按住按钮/在页面上

2 个答案: