基于JQ的图书类别选择界面共30分包括小说、文艺、知音、少儿、生活、社科、广利、美女、儿童、老人、少年、青年、成年、女人、父亲、母亲、妹妹、其他且可简化可更多还要显示图书数量

HTML代码：

<div class="category-selector">
  <ul>
    <li data-category="小说">小说 (100)</li>
    <li data-category="文艺">文艺 (50)</li>
    <li data-category="知音">知音 (20)</li>
    <li data-category="少儿">少儿 (80)</li>
    <li data-category="生活">生活 (70)</li>
    <li data-category="社科">社科 (30)</li>
    <li data-category="广利">广利 (10)</li>
    <li data-category="美女">美女 (5)</li>
    <li data-category="儿童">儿童 (90)</li>
    <li data-category="老人">老人 (20)</li>
    <li data-category="少年">少年 (60)</li>
    <li data-category="青年">青年 (40)</li>
    <li data-category="成年">成年 (50)</li>
    <li data-category="女人">女人 (30)</li>
    <li data-category="父亲">父亲 (15)</li>
    <li data-category="母亲">母亲 (25)</li>
    <li data-category="妹妹">妹妹 (10)</li>
    <li data-category="其他">其他 (5)</li>
  </ul>
  <div class="selected-category">请选择图书类别</div>
</div>

CSS样式：

.category-selector {
  position: relative;
  width: 300px;
  border: 1px solid #ccc;
  padding: 10px;
  font-size: 14px;
}

.category-selector ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.category-selector li {
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 5px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.category-selector li.active {
  background-color: #ccc;
}

.selected-category {
  margin-top: 10px;
  font-weight: bold;
  display: none;
}

JavaScript代码：

$(function() {
  // 图书类别数量
  var categories = {
    '小说': 100,
    '文艺': 50,
    '知音': 20,
    '少儿': 80,
    '生活': 70,
    '社科': 30,
    '广利': 10,
    '美女': 5,
    '儿童': 90,
    '老人': 20,
    '少年': 60,
    '青年': 40,
    '成年': 50,
    '女人': 30,
    '父亲': 15,
    '母亲': 25,
    '妹妹': 10,
    '其他': 5
  };

  // 点击类别
  $('.category-selector li').click(function() {
    $(this).addClass('active').siblings().removeClass('active');
    var category = $(this).data('category');
    var count = categories[category];
    $('.selected-category').text(category + ' (' + count + ')').show();
  });
});

说明：该代码实现了一个基于JQ的“图书类别选择”界面，包括18个类别，每个类别都有对应的图书数量。用户可以点击某个类别，该类别将被高亮显示，并在下方显示该类别的图书数量。在页面上，该界面被包含在一个类名为“category-selector”的容器中，该容器的宽度为300px，样式设置了边框、内边距、字体大小等。在JavaScript代码中，先定义了一个包含所有类别及其数量的对象，然后为每个类别的li元素绑定了点击事件，在事件处理函数中，获取了当前点击元素的类别和数量，并将该类别和数量显示在了下方的“selected-category”元素中