在网页中选择div

Question

我试图创建两个可选的div。 div的行为应类似于按钮。我希望能够使用左右箭头选择div之一。到现在为止，我已经可以使用此代码实现

document.addEventListener("keydown", keyDownDocument, false);

function keyDownDocument(e) {
var keyCode = e.keyCode;

  if(keyCode==37) {
  // left button
  $( ".left" ).addClass( "active_button" );
  $( ".right" ).removeClass( "active_button" );

  } else if(keyCode==39) {
	// right button
  $( ".right" ).addClass( "active_button" );
  $( ".left" ).removeClass( "active_button" );
  }
}

#wrapper {
	position: fixed;
	width:100%;
  height: 160px;
	background-color: gray;
	padding-left: 90px;
	padding-right: 90px;
}

 #wrapper:after {
	 content: "";
	 display: table;
	 clear: both;
} 

#text {
	padding-top: 33px;
	padding-bottom: 33px;
	width: 65%;
	display: inline-block;
	height: 80px;
	line-height: 44px;
	float: left;
}
#buttons {
	padding-top: 45px;
	padding-bottom: 45px;
	display: inline-block;
	float: left;
}
.left {
	height: 70px; 
	width: 70px; 
	margin-right: 20px;
	background-color: white;
	display: inline-block;
	
}
.right {
	height: 70px; 
	width: 70px;
	background-color: white;
	display: inline-block;
}

.active_button {
	background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div id="wrapper">
	<div id="text">
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
	</div>
	<div id="buttons">
		<div   class="left active_button" >not ok</div>
		<div   class="right">ok</div>
	</div>
</div>

现在，我希望也能够使用鼠标与按钮进行交互。我不确定该如何进行。

Answer 1

您需要添加的是

$('#buttons div').click(function(){
     $('#buttons div').removeClass('active_button');  // clear active button
     $(this).addClass('active_button');               // set current button to active

});

从两个按钮中切换active_button。

$('#buttons div').click(function(){
     $('#buttons div').removeClass('active_button');
     $(this).addClass('active_button');
     
});

document.addEventListener("keydown", keyDownDocument, false);

function keyDownDocument(e) {
var keyCode = e.keyCode;

  if(keyCode==37) {
  // left button
  $( ".left" ).addClass( "active_button" );
  $( ".right" ).removeClass( "active_button" );

  } else if(keyCode==39) {
	// right button
  $( ".right" ).addClass( "active_button" );
  $( ".left" ).removeClass( "active_button" );
  }
}

#wrapper {
	position: fixed;
	width:100%;
  height: 160px;
	background-color: gray;
	padding-left: 90px;
	padding-right: 90px;
}

 #wrapper:after {
	 content: "";
	 display: table;
	 clear: both;
} 

#text {
	padding-top: 33px;
	padding-bottom: 33px;
	width: 65%;
	display: inline-block;
	height: 80px;
	line-height: 44px;
	float: left;
}
#buttons {
	padding-top: 45px;
	padding-bottom: 45px;
	display: inline-block;
	float: left;
}
.left {
	height: 70px; 
	width: 70px; 
	margin-right: 20px;
	background-color: white;
	display: inline-block;
	
}
.right {
	height: 70px; 
	width: 70px;
	background-color: white;
	display: inline-block;
}

.active_button {
	background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div id="wrapper">
	<div id="text">
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
	</div>
	<div id="buttons">
		<div   class="left active_button" >not ok</div>
		<div   class="right">ok</div>
	</div>
</div>

Answer 2

我建议将选择代码提取到2个函数中，以避免重复代码。

然后，您只需单击按钮即可调用这些功能：

document.addEventListener("keydown", keyDownDocument, false);

function selectLeft() {
  $( ".left" ).addClass( "active_button" );
  $( ".right" ).removeClass( "active_button" );
}

function selectRight() {
  $( ".right" ).addClass( "active_button" );
  $( ".left" ).removeClass( "active_button" );
}

function keyDownDocument(e) {
var keyCode = e.keyCode;

  if(keyCode==37) {
    selectLeft();
  } else if(keyCode==39) {
    selectRight();
  }
}

$('.left').click(selectLeft);
$('.right').click(selectRight);

#wrapper {
	position: fixed;
	width:100%;
  height: 160px;
	background-color: gray;
	padding-left: 90px;
	padding-right: 90px;
}

 #wrapper:after {
	 content: "";
	 display: table;
	 clear: both;
} 

#text {
	padding-top: 33px;
	padding-bottom: 33px;
	width: 65%;
	display: inline-block;
	height: 80px;
	line-height: 44px;
	float: left;
}
#buttons {
	padding-top: 45px;
	padding-bottom: 45px;
	display: inline-block;
	float: left;
}

.left {
	height: 70px; 
	width: 70px; 
	margin-right: 20px;
	background-color: white;
	display: inline-block;
	
}
.right {
	height: 70px; 
	width: 70px;
	background-color: white;
	display: inline-block;
}

.active_button {
	background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div id="wrapper">
	<div id="text">
		Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.
	</div>
	<div id="buttons">
		<div   class="left active_button" >not ok</div>
		<div   class="right">ok</div>
	</div>
</div>

Answer 3

在网页中选择div

在html中选择元素的标准方法是将其设置为tabbable或设置tabindex。
我不知道所有浏览器是否都支持使用箭头键选择可选项元素。
所有浏览器都支持使用 tab 键选择页面上的下一个元素。
以及同一个 shift + tab 上一个元素选择器。

这是导航Webapge的当前标准化方法。自己实施可能与此冲突。

.container {
  width: 500px;
  height: 200px;
}

.showButton {
  background-color: cornflowerblue;
  box-sizing: border-box;
  display: inline-block;
  height: 100%;
  width: 48%;
}

.showButton:focus {
  background-color: tomato;
}

.showButton:active {
  outline: 2px solid black;
}

<div class="container">
  <div class="showButton" tabindex="1"> Test </div>
  <div class="showButton" tabindex="2"> Test </div>
</div>

使divs可选

3 个答案:

在网页中选择div