Question

我把div作为col-sm-12给了div。但是点击后，我希望该类成为该div的function openNav() { document.getElementById("mySidenav").style.width = "15%"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; }。我的意思是，我希望它能够做出回应

.sidenav {
  height: 100%;
  width: 0%;
  position: fixed;
  background-color: #4682B4;
  overflow-x: hidden;
  transition: 0.5s;
}

.table {
  border: 1;
  width: 100%;
  height: 100%;
  margin-top: 7%;
}

<div class="row">
  <div class="col-sm-2">
    <div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()"><i class="fa fa-times-circle" style="font-size:16px;color:white"></i></a>

      <div class="menus">
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>
      </div>
    </div>

    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>

  </div>
  <div class="col-sm-10">
    <table class="table">
      <tr>
        <th>Sr No.</th>
        <th>Title</th>
        <th>Name</th>
        <th>Picture</th>
        <th>Action</th>
        <th>Picture</th>
        <th>Action</th>
        <th>Picture</th>
        <th>Action</th>
        <th>Picture</th>
        <th>Action</th>
      </tr>
    </table>
  </div>
</div>

col-sm-10

页面加载div col-sm-12上的

将为openNav()，而col-sm-10函数中我希望它再次成为{ "agreement_id": "dd8afdbe-59cf-4272-b640-b14a24d8234c", "created_at": "2018-02-17 16:00:00.000Z", "id": "6db276a8-2efe-4495-9908-4d3fc4cc16fa", "event_type": "data", "total_charged_amount": { "tax_free_amount": null, "tax_amounts": [], "tax_included_amount": { "amount": 0.0241, "currency": "EUR" } } "used_service_units": [ { "amount": 2412739, "currency": null, "unit_of_measure": "bytes" } ] }而反之亦然

任何人都能帮助我吗？

Answer 1

$(".col-sm-10").click(function(){
    $(".col-sm-10").addClass("col-sm-12").removeClass('col-sm-10');
    alert('class changed')
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="row">
	  <div class="col-sm-2">
		<div id="mySidenav" class="sidenav">
		  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()"><i class="fa fa-times-circle" style="font-size:16px;color:white"></i></a>
		  
		  <div class="menus">
		  <a href="#">About</a>
		  <a href="#">Services</a>
		  <a href="#">Clients</a>
		  <a href="#">Contact</a>
		  </div>
		</div>
		
		 <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>
		 
	</div>
	<div class="col-sm-10"> 
	  <table class="table">  
	     <tr>
		     <th>Sr No.</th>
		     <th>Title</th>
		     <th>Name</th>
		     <th>Picture</th>
		     <th>Action</th>
		     <th>Picture</th>
		     <th>Action</th>
		     <th>Picture</th>
		     <th>Action</th>
		     <th>Picture</th>
		     <th>Action</th>
	     </tr>
	  </table>
	</div>
</div>

希望这对你有意义如何改变课程

Answer 2

这是一个片段，应该只使用（香草）Javascript做你想要的我在开头添加了变量效果，在一行中添加了一行来更改className：

（我还添加了FontAwesome和一些样式以使代码段效果可视化。）

var mySidenav = document.getElementById("mySidenav");
var table = document.getElementsByClassName("col-sm-10")[0];

function openNav() {
  mySidenav.style.width = "15%";
  // Solution to toggle between classes
  table.classList.add('col-sm-12');
  table.classList.remove('col-sm-10');
}

function closeNav() {
  mySidenav.style.width = "0";
  // Solution when you can replace all the class='…' string
  table.className = 'col-sm-10';
}

.sidenav {
  height: 100%;
  width: 0%;
  position: fixed;
  background-color: #4682B4;
  overflow-x: hidden;
  transition: 0.5s;
}

.table {
  border: 1;
  width: 100%;
  height: 100%;
  margin-top: 7%;
}


/* Added to make it visual */
.col-sm-10,
.col-sm-12 {
  transition: 0.5s;
}

.col-sm-12 {
  margin-left: 15%;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<div class="row">
  <div class="col-sm-2">
    <div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()"><i class="fa fa-times-circle" style="font-size:16px;color:white"></i></a>

      <div class="menus">
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>
      </div>
    </div>

    <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776;</span>

  </div>
  <div class="col-sm-10">
    <table class="table">
      <tr>
        <th>Sr No.</th>
        <th>Title</th>
        <th>Name</th>
        <th>Picture</th>
        <th>Action</th>
        <th>Picture</th>
        <th>Action</th>
        <th>Picture</th>
        <th>Action</th>
        <th>Picture</th>
        <th>Action</th>
      </tr>
    </table>
  </div>
</div>

我希望它有所帮助！

Answer 3

你可以通过

添加课程

$("button").click(function(){
    $("selector").addClass("class_name");
});

要删除课程，请使用

$("button").click(function(){
    $("selector").removeClass("class_name");
});

有关更多信息，您可以访问 https://www.w3schools.com/jquery/html_addclass.asp

我必须使用script，html，css更改类

3 个答案: