javascript - 如何根据每张幻灯片的高度上下移动 slider 上的导航按钮？

标签 javascript html css responsive-design slider

正如您在下面看到的，单选按钮静态地位于底部。使它们充满活力的最佳方式是什么，以便它们始终与每张幻灯片的文本保持相等的距离？

我不知道如何处理导航 div 以使其响应幻灯片高度(该特定幻灯片上有多少文本):

.csslider {
  -moz-perspective: 1300px;
  -ms-perspective: 1300px;
  -webkit-perspective: 1300px;
  perspective: 1300px;
  text-align: center;
  position: relative;
  color: #555;
}
.csslider > input {
  display: none;
}
.csslider > input:nth-of-type(10):checked ~ ul li:first-of-type {
  margin-left: -900%;
}
.csslider > input:nth-of-type(9):checked ~ ul li:first-of-type {
  margin-left: -800%;
}
.csslider > input:nth-of-type(8):checked ~ ul li:first-of-type {
  margin-left: -700%;
}
.csslider > input:nth-of-type(7):checked ~ ul li:first-of-type {
  margin-left: -600%;
}
.csslider > input:nth-of-type(6):checked ~ ul li:first-of-type {
  margin-left: -500%;
}
.csslider > input:nth-of-type(5):checked ~ ul li:first-of-type {
  margin-left: -400%;
}
.csslider > input:nth-of-type(4):checked ~ ul li:first-of-type {
  margin-left: -300%;
}
.csslider > input:nth-of-type(3):checked ~ ul li:first-of-type {
  margin-left: -200%;
}
.csslider > input:nth-of-type(2):checked ~ ul li:first-of-type {
  margin-left: -100%;
}
.csslider > input:nth-of-type(1):checked ~ ul li:first-of-type {
  margin-left: 0%;
}
.csslider > ul {
  position: relative;
  width: 50%;
  height: 170px;
  z-index: 1;
  font-size: 0;
  line-height: 0;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.csslider > ul > li {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-size: 15px;
  font-size: initial;
  line-height: normal;
  -moz-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
  vertical-align: top;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: normal;
}
.csslider > ul > li.scrollable {
  overflow-y: scroll;
}
.csslider > .navigation {
  position: absolute;
  bottom: -10px;
  left: 50%;
  z-index: 10;
  margin-bottom: -10px;
  font-size: 0;
  line-height: 0;
  text-align: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.csslider > .navigation > div {
  margin-left: -100%;
}
.csslider > .navigation label {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border-radius: 50%;
  margin: 0 2px;
  padding: 5px;
  background: #555;
}
.csslider > .navigation label:hover:after {
  opacity: 1;
}
.csslider > .navigation label:after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -3px;
  margin-top: -3px;
  background: #8dc124;
  border-radius: 50%;
  padding: 3px;
  opacity: 0;
}
.csslider > .arrows {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.csslider.inside .navigation {
  bottom: -50px;
  margin-bottom: 10px;
}
.csslider.inside .navigation label {
background-color: #555;
}
.csslider > input:nth-of-type(1):checked ~ .navigation label:nth-of-type(1):after,
.csslider > input:nth-of-type(2):checked ~ .navigation label:nth-of-type(2):after,
.csslider > input:nth-of-type(3):checked ~ .navigation label:nth-of-type(3):after,
.csslider > input:nth-of-type(4):checked ~ .navigation label:nth-of-type(4):after,
.csslider > input:nth-of-type(5):checked ~ .navigation label:nth-of-type(5):after,
.csslider > input:nth-of-type(6):checked ~ .navigation label:nth-of-type(6):after {
  opacity: 1;
}
.csslider > .arrows {
  position: absolute;
  left: -31px;
  top: 50%;
  width: 100%;
  height: 26px;
  padding: 0 31px;
  z-index: 0;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
.csslider > .arrows label {
  display: none;
  position: absolute;
  top: -50%;
  padding: 13px;
  box-shadow: inset 2px -2px 0 1px #555;
  cursor: pointer;
  -moz-transition: .15s;
  -o-transition: .15s;
  -webkit-transition: .15s;
  transition: .15s;
}
.csslider > .arrows label:hover {
  box-shadow: inset 3px -3px 0 2px #8dc124;
  margin: 0 0px;
}
.csslider > .arrows label:before {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  height: 300%;
  width: 300%;
}
.csslider.infinity > input:first-of-type:checked ~ .arrows label:last-of-type,
.csslider > input:nth-of-type(1):checked ~ .arrows label:nth-of-type(0),
.csslider > input:nth-of-type(2):checked ~ .arrows label:nth-of-type(1),
.csslider > input:nth-of-type(3):checked ~ .arrows label:nth-of-type(2),
.csslider > input:nth-of-type(4):checked ~ .arrows label:nth-of-type(3),
.csslider > input:nth-of-type(5):checked ~ .arrows label:nth-of-type(4),
.csslider > input:nth-of-type(6):checked ~ .arrows label:nth-of-type(5),
.csslider > input:nth-of-type(7):checked ~ .arrows label:nth-of-type(6) {
  display: block;
  left: 0;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.csslider.infinity > input:last-of-type:checked ~ .arrows label:first-of-type,
.csslider > input:nth-of-type(1):checked ~ .arrows label:nth-of-type(2),
.csslider > input:nth-of-type(2):checked ~ .arrows label:nth-of-type(3),
.csslider > input:nth-of-type(3):checked ~ .arrows label:nth-of-type(4),
.csslider > input:nth-of-type(4):checked ~ .arrows label:nth-of-type(5),
.csslider > input:nth-of-type(5):checked ~ .arrows label:nth-of-type(6) {
  display: block;
  right: 0;
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
}
<!DOCTYPE html>
<html>
<head>
    <title>Slider test</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="slider1" class="csslider infinity inside">
    <input type="radio" name="slides" id="slides_1" checked />
    <input type="radio" name="slides" id="slides_2" />
    <input type="radio" name="slides" id="slides_3" />
    <input type="radio" name="slides" id="slides_4" />
    <input type="radio" name="slides" id="slides_5" />
    <input type="radio" name="slides" id="slides_6" />
    <ul>
        <li>
            <p id="solutionsTitle">Title</p>
             Temporibus autem quibusdam et aut Temporibus autem quibusdam et aut Temporibus autem quibu beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur sdam et aut Temporibus autem quibusdam et aut Temporibus autem quibusdam et aut Temporibus autem quibusdam et aut.
        </li>
        <li>
            <p id="solutionsTitle">Title1</p>
               Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
        </li>
        <li>
            <p id="solutionsTitle">Title2</p>
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 
        </li>
        <li>
            <p id="solutionsTitle">Title 3</p>
Ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 
        </li>
        <li>
            <p id="solutionsTitle">Title 4</p>
                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut
        </li>
        <li>
             <p id="solutionsTitle">Title 5</p>
                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut  Temporibus autem quibusdam et aut  Temporibus autem quibusdam et aut
        </li>
    </ul>
    <div class="arrows">
        <label for="slides_1"></label>
        <label for="slides_2"></label>
        <label for="slides_3"></label>
        <label for="slides_4"></label>
        <label for="slides_5"></label>
        <label for="slides_6"></label>
    </div>
    <div class="navigation">
        <div>
            <label for="slides_1"></label>
            <label for="slides_2"></label>
            <label for="slides_3"></label>
            <label for="slides_4"></label>
            <label for="slides_5"></label>
            <label for="slides_6"></label>
        </div>
    </div>
</div>
</body>
</html>

CodePen

这是一个 jsfiddle 链接 http://jsfiddle.net/reqzxj6s/

最佳答案

我认为不存在 Leo Van Deuren 所说的纯 CSS 解决方案。我使用了非常简单的 jquery 代码并稍微更改了您的 CSS 来解决您的问题。我希望这可以帮助你。查一下:https://jsfiddle.net/1jb6rxez/10

HTML

$(document).ready(function(){

  // init situation
  $("#slides_1").prop('checked', true);
  var num="1";

  checkHeight();

  $("label").click(function(){
    num=$(this).attr("for").replace('slides_','');
    checkHeight();
  })

  $(window).resize(function(){
    //check ul height if I resize my browser
    checkHeight();
  })

  function checkHeight(){
    $("ul").css({"height":$("li:nth-child("+num+")").height()});
  }
})
.csslider {
	-moz-perspective: 1300px;
	-ms-perspective: 1300px;
	-webkit-perspective: 1300px;
	perspective: 1300px;
	text-align: center;
	position: relative;
	color: #555;
}
.csslider > input {
	display: none;
}

.csslider > input:nth-of-type(6):checked ~ ul li:first-of-type {
	margin-left: -500%;
}
.csslider > input:nth-of-type(5):checked ~ ul li:first-of-type {
	margin-left: -400%;
}
.csslider > input:nth-of-type(4):checked ~ ul li:first-of-type {
	margin-left: -300%;
	
}
.csslider > input:nth-of-type(3):checked ~ ul li:first-of-type {
	margin-left: -200%;

}
.csslider > input:nth-of-type(2):checked ~ ul li:first-of-type {
	margin-left: -100%;
	
}
.csslider > input:nth-of-type(1):checked ~ ul li:first-of-type {
	margin-left: 0%;
}

.csslider > ul {
	position: relative;
	display: inline-block;
	width: 50%;
	z-index: 1;
	font-size: 0;
	line-height: 0;
	margin: 0 auto;
	padding: 0;
	clear: both;
	overflow: hidden;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.csslider > ul > li {
	position: relative;
	display: inline-block;
	width: 100%;
	height: auto;
	font-size: 15px;
	font-size: initial;
	line-height: normal;

	-moz-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
	-o-transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
	transition: all 0.5s cubic-bezier(0.4, 1.3, 0.65, 1);
	vertical-align: top;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	white-space: normal;
}
.csslider > ul > li.scrollable {
	overflow-y: scroll;
}
.csslider > .navigation {
	position: static;
	/*position: absolute;*/
	bottom: -10px;
	left: 50%;
	z-index: 10;
	margin-bottom: -10px;
	font-size: 0;
	line-height: 0;
	text-align: center;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
/*.csslider > .navigation > div {
	margin-left: -100%;
}*/
.csslider > .navigation label {
	position: relative;
	display: inline-block;
	cursor: pointer;
	border-radius: 50%;
	margin: 0 2px;
	padding: 5px;
	background: #555;
}
.csslider > .navigation label:hover:after {
	opacity: 1;
}
.csslider > .navigation label:after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -3px;
	margin-top: -3px;
	background: #8dc124;
	border-radius: 50%;
	padding: 3px;
	opacity: 0;
}
.csslider > .arrows {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.csslider.inside .navigation {
	bottom: -50px;
	margin-bottom: 10px;
}
.csslider.inside .navigation label {
	background-color: #555;
}
.csslider > input:nth-of-type(1):checked ~ .navigation label:nth-of-type(1):after, 
.csslider > input:nth-of-type(2):checked ~ .navigation label:nth-of-type(2):after, 
.csslider > input:nth-of-type(3):checked ~ .navigation label:nth-of-type(3):after, 
.csslider > input:nth-of-type(4):checked ~ .navigation label:nth-of-type(4):after, 
.csslider > input:nth-of-type(5):checked ~ .navigation label:nth-of-type(5):after, 
.csslider > input:nth-of-type(6):checked ~ .navigation label:nth-of-type(6):after {
	opacity: 1;
}
.csslider > .arrows {
	position: absolute;
	left: -31px;
	top: 50%;
	width: 100%;
	height: 26px;
	padding: 0 31px;
	z-index: 0;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}
.csslider > .arrows label {
	display: none;
	position: absolute;
	top: -50%;
	padding: 13px;
	box-shadow: inset 2px -2px 0 1px #555;
	cursor: pointer;
	-moz-transition: .15s;
	-o-transition: .15s;
	-webkit-transition: .15s;
	transition: .15s;
}
.csslider > .arrows label:hover {
	box-shadow: inset 3px -3px 0 2px #8dc124;
	margin: 0 0px;
}
.csslider > .arrows label:before {
	content: '';
	position: absolute;
	top: -100%;
	left: -100%;
	height: 300%;
	width: 300%;
}
.csslider.infinity > input:first-of-type:checked ~ .arrows label:last-of-type, 
.csslider > input:nth-of-type(1):checked ~ .arrows label:nth-of-type(0), 
.csslider > input:nth-of-type(2):checked ~ .arrows label:nth-of-type(1), 
.csslider > input:nth-of-type(3):checked ~ .arrows label:nth-of-type(2), 
.csslider > input:nth-of-type(4):checked ~ .arrows label:nth-of-type(3), 
.csslider > input:nth-of-type(5):checked ~ .arrows label:nth-of-type(4), 
.csslider > input:nth-of-type(6):checked ~ .arrows label:nth-of-type(5), 
.csslider > input:nth-of-type(7):checked ~ .arrows label:nth-of-type(6) {
	display: block;
	left: 0;
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.csslider.infinity > input:last-of-type:checked ~ .arrows label:first-of-type, 
.csslider > input:nth-of-type(1):checked ~ .arrows label:nth-of-type(2), 
.csslider > input:nth-of-type(2):checked ~ .arrows label:nth-of-type(3), 
.csslider > input:nth-of-type(3):checked ~ .arrows label:nth-of-type(4), 
.csslider > input:nth-of-type(4):checked ~ .arrows label:nth-of-type(5), 
.csslider > input:nth-of-type(5):checked ~ .arrows label:nth-of-type(6) {
	display: block;
	right: 0;
	-moz-transform: rotate(225deg);
	-ms-transform: rotate(225deg);
	-o-transform: rotate(225deg);
	-webkit-transform: rotate(225deg);
	transform: rotate(225deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
    <div id="slider1" class="csslider infinity inside">
      <input type="radio" name="slides" id="slides_1" checked />
      <input type="radio" name="slides" id="slides_2" />
      <input type="radio" name="slides" id="slides_3" />
      <input type="radio" name="slides" id="slides_4" />
      <input type="radio" name="slides" id="slides_5" />
      <input type="radio" name="slides" id="slides_6" />
      <ul>
        <li>
          <p id="solutionsTitle">Title</p>
          Temporibus autem quibusdam et aut Temporibus autem quibusdam et aut Temporibus autem quibu beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur sdam et aut Temporibus autem quibusdam et aut Temporibus autem quibusdam et aut Temporibus autem quibusdam et aut. </li>
        <li>
          <p id="solutionsTitle">Title1</p>
          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam </li>
        <li>
          <p id="solutionsTitle">Title2</p>
          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, </li>
        <li>
          <p id="solutionsTitle">Title 3</p>
          Ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, </li>
        <li>
          <p id="solutionsTitle">Title 4</p>
          At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut </li>
        <li>
          <p id="solutionsTitle">Title 5</p>
          At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut  Temporibus autem quibusdam et aut  Temporibus autem quibusdam et aut </li>
      </ul>
      <div class="arrows">
        <label for="slides_1"></label>
        <label for="slides_2"></label>
        <label for="slides_3"></label>
        <label for="slides_4"></label>
        <label for="slides_5"></label>
        <label for="slides_6"></label>
      </div>
      <div class="navigation">
        <div>
          <label for="slides_1"></label>
          <label for="slides_2"></label>
          <label for="slides_3"></label>
          <label for="slides_4"></label>
          <label for="slides_5"></label>
          <label for="slides_6"></label>
        </div>
      </div>
    </div>
</body>

关于javascript - 如何根据每张幻灯片的高度上下移动 slider 上的导航按钮？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51141546/

上一篇：javascript - 拒绝应用来自 'http://localhost:3000/css/style.css' 的样式，因为它的 MIME 类型 ('text/html' ) 不是受支持的样式表 MIME 类型

下一篇：html - 全高侧边栏与带有 flexbox 的 Wordpress 相同

相关文章：

javascript - 通过使用 jquery 和 html 单击行从表中检索列值

html - 在 Safari iOS 13 上始终显示滚动条

javascript - 仅使用 JavaScript 选择随机 HTML 元素

javascript - 如何根据 Angular 位置计算矩形的 Angular ？

javascript - 使用 Jquery 并使用 this 关键字将 CSS 添加到一组图像

javascript - 向下/向上滚动时导航汉堡图标反复闪烁

html - CSS 文本对齐不会居中

javascript - ajax函数打不开页面

javascript - 使用jquery隐藏表头中的图像

javascript - 更新动态插入表的值

©2024 IT工具网  联系我们